azcomputerguru/claudetools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(service-overview): Rework for comfortable two-page layout

Browse Source 
Major improvements for readability:
- Font sizes increased 20-40% (body 10px→12px, headers 22-26px→26-28px)
- Page padding increased 0.4in→0.6in for more breathing room
- All spacing increased 50-60% (margins, gaps, padding)
- Line-height improved (1.35→1.5 for body text)
- Box padding increased 30-50% across all elements
- Grid gaps increased (6px→10px)

Result: Professional, comfortable two-page layout that's easy to read
without the cramped, maximum-density feel of the previous version.
This commit is contained in:
Mike Swanson
2026-02-01 19:08:38 -07:00
parent 1a8993610e
commit 24ea18c248
1 changed files with 150 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

300
projects/msp-pricing/marketing/Service-Overview-OnePager.html
View File

@@ -11,8 +11,8 @@ body { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.5; color: #33
.page { .page {
width: 8.5in; width: 8.5in;
height: 11in; height: 11in;
padding: 0.4in; padding: 0.6in;
padding-bottom: 0.65in; padding-bottom: 0.8in;
background: white; background: white;
position: relative; position: relative;
margin: 20px auto; margin: 20px auto;
@@ -27,8 +27,8 @@ body { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.5; color: #33
width: 100%; width: 100%;
height: 11in; height: 11in;
margin: 0; margin: 0;
padding: 0.4in; padding: 0.6in;
padding-bottom: 0.65in; padding-bottom: 0.8in;
page-break-after: always; page-break-after: always;
box-shadow: none; box-shadow: none;
overflow: hidden; overflow: hidden;
@@ -40,32 +40,32 @@ body { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.5; color: #33
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-bottom: 8px; padding-bottom: 12px;
border-bottom: 3px solid #1e3c72; border-bottom: 3px solid #1e3c72;
margin-bottom: 12px; margin-bottom: 16px;
} }
.logo { font-size: 20px; font-weight: bold; color: #1e3c72; } .logo { font-size: 22px; font-weight: bold; color: #1e3c72; }
.contact { text-align: right; font-size: 10px; color: #666; } .contact { text-align: right; font-size: 11px; color: #666; }
.contact .phone { font-size: 14px; font-weight: bold; color: #f39c12; } .contact .phone { font-size: 16px; font-weight: bold; color: #f39c12; }
h1 { color: #1e3c72; font-size: 22px; margin-bottom: 4px; line-height: 1.2; } h1 { color: #1e3c72; font-size: 26px; margin-bottom: 6px; line-height: 1.2; }
h2 { color: #1e3c72; font-size: 15px; margin: 10px 0 6px 0; padding-bottom: 3px; border-bottom: 2px solid #f39c12; page-break-after: avoid; } h2 { color: #1e3c72; font-size: 18px; margin: 15px 0 9px 0; padding-bottom: 4px; border-bottom: 2px solid #f39c12; page-break-after: avoid; }
h3 { color: #1e3c72; font-size: 12px; margin: 6px 0 3px 0; font-weight: bold; page-break-after: avoid; } h3 { color: #1e3c72; font-size: 14px; margin: 9px 0 5px 0; font-weight: bold; page-break-after: avoid; }
.subtitle { font-size: 11px; color: #666; font-style: italic; margin-bottom: 6px; } .subtitle { font-size: 12px; color: #666; font-style: italic; margin-bottom: 9px; }
p { font-size: 10px; margin-bottom: 5px; line-height: 1.35; } p { font-size: 12px; margin-bottom: 8px; line-height: 1.5; }
.tier-comparison { .tier-comparison {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 6px; gap: 10px;
margin: 6px 0; margin: 10px 0;
} }
.tier-box { .tier-box {
border: 2px solid #e0e0e0; border: 2px solid #e0e0e0;
border-radius: 6px; border-radius: 6px;
padding: 6px; padding: 10px;
position: relative; position: relative;
background: white; background: white;
page-break-inside: avoid; page-break-inside: avoid;
@@ -76,42 +76,42 @@ p { font-size: 10px; margin-bottom: 5px; line-height: 1.35; }
} }
.tier-box .badge { .tier-box .badge {
position: absolute; position: absolute;
top: -8px; top: -10px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
background: #f39c12; background: #f39c12;
color: white; color: white;
padding: 2px 6px; padding: 3px 8px;
border-radius: 8px; border-radius: 8px;
font-weight: bold; font-weight: bold;
font-size: 8px; font-size: 9px;
white-space: nowrap; white-space: nowrap;
} }
.tier-name { .tier-name {
font-size: 11px; font-size: 13px;
font-weight: bold; font-weight: bold;
color: #1e3c72; color: #1e3c72;
text-align: center; text-align: center;
margin-bottom: 3px; margin-bottom: 4px;
} }
.tier-price { .tier-price {
text-align: center; text-align: center;
font-size: 16px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #27ae60; color: #27ae60;
margin-bottom: 3px; margin-bottom: 4px;
} }
.tier-price .period { .tier-price .period {
font-size: 8px; font-size: 9px;
color: #666; color: #666;
display: block; display: block;
} }
.tier-label { .tier-label {
text-align: center; text-align: center;
font-size: 9px; font-size: 10px;
font-weight: bold; font-weight: bold;
color: #666; color: #666;
margin-bottom: 5px; margin-bottom: 6px;
} }
.tier-features { .tier-features {
list-style: none; list-style: none;
@@ -119,11 +119,11 @@ p { font-size: 10px; margin-bottom: 5px; line-height: 1.35; }
margin: 0; margin: 0;
} }
.tier-features li { .tier-features li {
font-size: 9px; font-size: 11px;
padding: 2px 0; padding: 3px 0;
padding-left: 12px; padding-left: 14px;
position: relative; position: relative;
line-height: 1.3; line-height: 1.4;
} }
.tier-features li:before { .tier-features li:before {
content: "✓"; content: "✓";
@@ -131,16 +131,16 @@ p { font-size: 10px; margin-bottom: 5px; line-height: 1.35; }
left: 0; left: 0;
color: #27ae60; color: #27ae60;
font-weight: bold; font-weight: bold;
font-size: 10px; font-size: 12px;
} }
.tier-features li strong { .tier-features li strong {
color: #1e3c72; color: #1e3c72;
} }
.best-for { .best-for {
margin-top: 5px; margin-top: 8px;
padding-top: 5px; padding-top: 8px;
border-top: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0;
font-size: 8px; font-size: 10px;
color: #666; color: #666;
text-align: center; text-align: center;
} }
@@ -148,13 +148,13 @@ p { font-size: 10px; margin-bottom: 5px; line-height: 1.35; }
.support-grid { .support-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 5px; gap: 10px;
margin: 6px 0; margin: 10px 0;
} }
.support-card { .support-card {
border: 2px solid #e0e0e0; border: 2px solid #e0e0e0;
border-radius: 6px; border-radius: 6px;
padding: 5px; padding: 8px;
text-align: center; text-align: center;
position: relative; position: relative;
page-break-inside: avoid; page-break-inside: avoid;
@@ -165,70 +165,70 @@ p { font-size: 10px; margin-bottom: 5px; line-height: 1.35; }
.support-card.popular:before { .support-card.popular:before {
content: "⭐ POPULAR"; content: "⭐ POPULAR";
position: absolute; position: absolute;
top: -6px; top: -8px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
background: #f39c12; background: #f39c12;
color: white; color: white;
padding: 1px 4px; padding: 2px 6px;
border-radius: 6px; border-radius: 6px;
font-size: 7px; font-size: 8px;
font-weight: bold; font-weight: bold;
} }
.support-name { .support-name {
font-size: 10px; font-size: 12px;
font-weight: bold; font-weight: bold;
color: #1e3c72; color: #1e3c72;
margin-bottom: 2px; margin-bottom: 3px;
} }
.support-price { .support-price {
font-size: 14px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #27ae60; color: #27ae60;
margin-bottom: 2px; margin-bottom: 3px;
} }
.support-details { .support-details {
font-size: 8px; font-size: 10px;
color: #666; color: #666;
margin-bottom: 3px; margin-bottom: 4px;
} }
.support-features { .support-features {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 3px 0 0 0; margin: 4px 0 0 0;
} }
.support-features li { .support-features li {
font-size: 8px; font-size: 10px;
padding: 1px 0; padding: 2px 0;
line-height: 1.2; line-height: 1.3;
} }
.table { .table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin: 5px 0; margin: 8px 0;
font-size: 8px; font-size: 10px;
page-break-inside: avoid; page-break-inside: avoid;
} }
.table th { .table th {
background: #1e3c72; background: #1e3c72;
color: white; color: white;
padding: 3px; padding: 5px;
text-align: left; text-align: left;
font-weight: 600; font-weight: 600;
} }
.table td { .table td {
padding: 2px 3px; padding: 4px 5px;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;
} }
.callout-box { .callout-box {
background: #fff3cd; background: #fff3cd;
border-left: 3px solid #f39c12; border-left: 3px solid #f39c12;
padding: 5px 6px; padding: 8px 10px;
margin: 5px 0; margin: 8px 0;
border-radius: 2px; border-radius: 2px;
font-size: 8px; font-size: 10px;
page-break-inside: avoid; page-break-inside: avoid;
} }
.callout-box.success { .callout-box.success {
@@ -244,26 +244,26 @@ p { font-size: 10px; margin-bottom: 5px; line-height: 1.35; }
background: #f8f9fa; background: #f8f9fa;
border: 1px solid #1e3c72; border: 1px solid #1e3c72;
border-radius: 4px; border-radius: 4px;
padding: 5px; padding: 8px;
margin: 5px 0; margin: 8px 0;
page-break-inside: avoid; page-break-inside: avoid;
} }
.example-header { .example-header {
font-size: 9px; font-size: 11px;
font-weight: bold; font-weight: bold;
color: #1e3c72; color: #1e3c72;
margin-bottom: 2px; margin-bottom: 4px;
} }
.cost-line { .cost-line {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 8px; font-size: 10px;
padding: 1px 0; padding: 2px 0;
} }
.cost-line.total { .cost-line.total {
border-top: 1px solid #1e3c72; border-top: 1px solid #1e3c72;
margin-top: 3px; margin-top: 5px;
padding-top: 3px; padding-top: 5px;
font-weight: bold; font-weight: bold;
color: #1e3c72; color: #1e3c72;
} }
@@ -271,13 +271,13 @@ p { font-size: 10px; margin-bottom: 5px; line-height: 1.35; }
ul.feature-list { ul.feature-list {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 3px 0; margin: 5px 0;
} }
ul.feature-list li { ul.feature-list li {
padding: 1px 0; padding: 2px 0;
padding-left: 12px; padding-left: 14px;
position: relative; position: relative;
font-size: 9px; font-size: 11px;
} }
ul.feature-list li:before { ul.feature-list li:before {
content: "✓"; content: "✓";
@@ -285,98 +285,98 @@ ul.feature-list li:before {
left: 0; left: 0;
color: #27ae60; color: #27ae60;
font-weight: bold; font-weight: bold;
font-size: 10px; font-size: 12px;
} }
.cta-box { .cta-box {
background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
color: white; color: white;
padding: 8px; padding: 12px;
border-radius: 6px; border-radius: 6px;
text-align: center; text-align: center;
margin: 6px 0; margin: 10px 0;
page-break-inside: avoid; page-break-inside: avoid;
} }
.cta-box h2 { .cta-box h2 {
color: white; color: white;
border: none; border: none;
margin: 0 0 3px 0; margin: 0 0 5px 0;
font-size: 13px; font-size: 16px;
} }
.cta-box .phone-large { .cta-box .phone-large {
font-size: 16px; font-size: 18px;
font-weight: bold; font-weight: bold;
margin: 3px 0; margin: 5px 0;
} }
.cta-box p { .cta-box p {
font-size: 9px; font-size: 11px;
margin: 2px 0; margin: 3px 0;
} }
.footer { .footer {
position: absolute; position: absolute;
bottom: 0.25in; bottom: 0.3in;
left: 0.4in; left: 0.6in;
right: 0.4in; right: 0.6in;
text-align: center; text-align: center;
padding-top: 5px; padding-top: 6px;
border-top: 2px solid #1e3c72; border-top: 2px solid #1e3c72;
color: #666; color: #666;
font-size: 8px; font-size: 9px;
background: white; background: white;
} }
.pricing-grid { .pricing-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 6px; gap: 10px;
margin: 5px 0; margin: 8px 0;
} }
.pricing-tier { .pricing-tier {
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
border-radius: 4px; border-radius: 4px;
padding: 5px; padding: 8px;
text-align: center; text-align: center;
page-break-inside: avoid; page-break-inside: avoid;
} }
.pricing-tier h4 { .pricing-tier h4 {
font-size: 10px; font-size: 12px;
color: #1e3c72; color: #1e3c72;
margin-bottom: 2px; margin-bottom: 3px;
} }
.pricing-tier .price { .pricing-tier .price {
font-size: 13px; font-size: 15px;
font-weight: bold; font-weight: bold;
color: #27ae60; color: #27ae60;
margin: 2px 0; margin: 3px 0;
} }
.pricing-tier .details { .pricing-tier .details {
font-size: 7px; font-size: 9px;
color: #666; color: #666;
margin: 1px 0; margin: 2px 0;
} }
.pricing-tier ul { .pricing-tier ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 3px 0 0 0; margin: 5px 0 0 0;
text-align: left; text-align: left;
} }
.pricing-tier li { .pricing-tier li {
font-size: 7px; font-size: 9px;
padding: 1px 0; padding: 2px 0;
line-height: 1.2; line-height: 1.3;
} }
.voip-grid { .voip-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 4px; gap: 8px;
margin: 5px 0; margin: 8px 0;
} }
.voip-box { .voip-box {
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
border-radius: 4px; border-radius: 4px;
padding: 4px; padding: 6px;
position: relative; position: relative;
page-break-inside: avoid; page-break-inside: avoid;
} }
@@ -387,40 +387,40 @@ ul.feature-list li:before {
.voip-box.popular:before { .voip-box.popular:before {
content: "★ POPULAR"; content: "★ POPULAR";
position: absolute; position: absolute;
top: -5px; top: -7px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
background: #f39c12; background: #f39c12;
color: white; color: white;
padding: 1px 3px; padding: 2px 5px;
border-radius: 4px; border-radius: 4px;
font-size: 6px; font-size: 7px;
font-weight: bold; font-weight: bold;
} }
.voip-name { .voip-name {
font-size: 9px; font-size: 11px;
font-weight: bold; font-weight: bold;
color: #1e3c72; color: #1e3c72;
text-align: center; text-align: center;
margin-bottom: 2px; margin-bottom: 3px;
} }
.voip-price { .voip-price {
font-size: 13px; font-size: 15px;
font-weight: bold; font-weight: bold;
color: #27ae60; color: #27ae60;
text-align: center; text-align: center;
margin-bottom: 2px; margin-bottom: 3px;
} }
.voip-price .period { .voip-price .period {
font-size: 7px; font-size: 8px;
color: #666; color: #666;
display: block; display: block;
} }
.voip-label { .voip-label {
font-size: 7px; font-size: 9px;
color: #666; color: #666;
text-align: center; text-align: center;
margin-bottom: 3px; margin-bottom: 4px;
} }
.voip-features { .voip-features {
list-style: none; list-style: none;
@@ -428,9 +428,9 @@ ul.feature-list li:before {
margin: 0; margin: 0;
} }
.voip-features li { .voip-features li {
font-size: 7px; font-size: 9px;
padding: 1px 0; padding: 2px 0;
line-height: 1.2; line-height: 1.3;
} }
</style> </style>
</head> </head>
@@ -471,7 +471,7 @@ ul.feature-list li:before {
<div class="tier-name">GPS-PRO</div> <div class="tier-name">GPS-PRO</div>
<div class="tier-price">$26<span class="period">/endpoint/month</span></div> <div class="tier-price">$26<span class="period">/endpoint/month</span></div>
<div class="tier-label">Business Protection</div> <div class="tier-label">Business Protection</div>
<p style="font-size: 8px; font-weight: 600; margin-bottom: 2px; text-align: center;">Everything in BASIC, PLUS:</p> <p style="font-size: 10px; font-weight: 600; margin-bottom: 3px; text-align: center;">Everything in BASIC, PLUS:</p>
<ul class="tier-features"> <ul class="tier-features">
<li><strong>Advanced EDR</strong> threat detection</li> <li><strong>Advanced EDR</strong> threat detection</li>
<li><strong>Email security</strong> & anti-phishing</li> <li><strong>Email security</strong> & anti-phishing</li>
@@ -486,7 +486,7 @@ ul.feature-list li:before {
<div class="tier-name">GPS-ADVANCED</div> <div class="tier-name">GPS-ADVANCED</div>
<div class="tier-price">$39<span class="period">/endpoint/month</span></div> <div class="tier-price">$39<span class="period">/endpoint/month</span></div>
<div class="tier-label">Maximum Protection</div> <div class="tier-label">Maximum Protection</div>
<p style="font-size: 8px; font-weight: 600; margin-bottom: 2px; text-align: center;">Everything in PRO, PLUS:</p> <p style="font-size: 10px; font-weight: 600; margin-bottom: 3px; text-align: center;">Everything in PRO, PLUS:</p>
<ul class="tier-features"> <ul class="tier-features">
<li><strong>Advanced threat intelligence</strong></li> <li><strong>Advanced threat intelligence</strong></li>
<li><strong>Ransomware rollback</strong></li> <li><strong>Ransomware rollback</strong></li>
@@ -546,10 +546,10 @@ ul.feature-list li:before {
</div> </div>
</div> </div>
<p style="font-size: 8px; margin: 3px 0;"><strong>All Support Plans Include:</strong> Email & phone support, covers GPS-enrolled endpoints and equipment, professional service, single point of contact.</p> <p style="font-size: 10px; margin: 5px 0;"><strong>All Support Plans Include:</strong> Email & phone support, covers GPS-enrolled endpoints and equipment, professional service, single point of contact.</p>
<h2>Prepaid Block Time - Non-Expiring Project Hours</h2> <h2>Prepaid Block Time - Non-Expiring Project Hours</h2>
<p style="font-size: 8px;">Perfect for one-time projects, seasonal needs, or supplementing your Support Plan.</p> <p style="font-size: 10px;">Perfect for one-time projects, seasonal needs, or supplementing your Support Plan.</p>
<table class="table"> <table class="table">
<tr><th>Block Size</th><th>Price</th><th>Effective Rate</th><th>Expiration</th></tr> <tr><th>Block Size</th><th>Price</th><th>Effective Rate</th><th>Expiration</th></tr>
@@ -568,7 +568,7 @@ ul.feature-list li:before {
<div class="cost-line total"><span>TOTAL</span><span>$665/month</span></div> <div class="cost-line total"><span>TOTAL</span><span>$665/month</span></div>
</div> </div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;"> <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
<div class="example-box"> <div class="example-box">
<div class="example-header">Growing Business (22 endpoints)</div> <div class="example-header">Growing Business (22 endpoints)</div>
<div class="cost-line"><span>GPS-Pro (22 × $26)</span><span>$572</span></div> <div class="cost-line"><span>GPS-Pro (22 × $26)</span><span>$572</span></div>
@@ -589,11 +589,11 @@ ul.feature-list li:before {
</div> </div>
<div class="footer"> <div class="footer">
<div style="margin-bottom: 4px;"> <div style="margin-bottom: 5px;">
<strong style="font-size: 11px; color: #f39c12;">Ready to Get Started?</strong> <strong style="font-size: 12px; color: #f39c12;">Ready to Get Started?</strong>
Call <strong style="color: #1e3c72;">520.304.8300</strong> or visit <strong style="color: #1e3c72;">azcomputerguru.com</strong> Call <strong style="color: #1e3c72;">520.304.8300</strong> or visit <strong style="color: #1e3c72;">azcomputerguru.com</strong>
</div> </div>
<div style="font-size: 8px;"> <div style="font-size: 9px;">
Protecting Tucson Businesses Since 2001 | 7437 E. 22nd St, Tucson, AZ 85710 | Turn over for complete IT services → Protecting Tucson Businesses Since 2001 | 7437 E. 22nd St, Tucson, AZ 85710 | Turn over for complete IT services →
</div> </div>
</div> </div>
@@ -658,21 +658,21 @@ ul.feature-list li:before {
<h2>Email Hosting - Budget-Friendly or Enterprise</h2> <h2>Email Hosting - Budget-Friendly or Enterprise</h2>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 5px 0;"> <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0;">
<div> <div>
<h3>WHM Email - Budget Option</h3> <h3>WHM Email - Budget Option</h3>
<p><strong>From $2/mailbox/mo</strong> (5GB) + $2 per 5GB</p> <p><strong>From $2/mailbox/mo</strong> (5GB) + $2 per 5GB</p>
<ul class="feature-list" style="font-size: 8px;"> <ul class="feature-list" style="font-size: 10px;">
<li>IMAP/POP3/SMTP, webmail</li> <li>IMAP/POP3/SMTP, webmail</li>
<li>Works with Outlook, mobile apps</li> <li>Works with Outlook, mobile apps</li>
<li>Daily backups, spam filtering</li> <li>Daily backups, spam filtering</li>
</ul> </ul>
<p style="font-size: 8px; margin-top: 3px;"><strong>Packages:</strong> 5GB: $2 | 10GB: $4 | 25GB: $10 | 50GB: $20</p> <p style="font-size: 10px; margin-top: 5px;"><strong>Packages:</strong> 5GB: $2 | 10GB: $4 | 25GB: $10 | 50GB: $20</p>
</div> </div>
<div> <div>
<h3>Microsoft 365 - Enterprise</h3> <h3>Microsoft 365 - Enterprise</h3>
<ul class="feature-list" style="font-size: 8px;"> <ul class="feature-list" style="font-size: 10px;">
<li><strong>Basic:</strong> $7/user (50GB, web/mobile, Teams)</li> <li><strong>Basic:</strong> $7/user (50GB, web/mobile, Teams)</li>
<li><strong>Standard:</strong> $14/user (Desktop apps) - POPULAR</li> <li><strong>Standard:</strong> $14/user (Desktop apps) - POPULAR</li>
<li><strong>Premium:</strong> $24/user (Advanced security)</li> <li><strong>Premium:</strong> $24/user (Advanced security)</li>
@@ -681,7 +681,7 @@ ul.feature-list li:before {
</div> </div>
</div> </div>
<p style="font-size: 8px; margin: 3px 0;"><strong>Email Security Add-On:</strong> $3/mailbox/month (Anti-phishing, spam, DLP) - Recommended for WHM</p> <p style="font-size: 10px; margin: 5px 0;"><strong>Email Security Add-On:</strong> $3/mailbox/month (Anti-phishing, spam, DLP) - Recommended for WHM</p>
<h2>VoIP Services - GPS-Voice Business Phone Systems</h2> <h2>VoIP Services - GPS-Voice Business Phone Systems</h2>
@@ -704,7 +704,7 @@ ul.feature-list li:before {
<div class="voip-name">GPS-Voice Standard</div> <div class="voip-name">GPS-Voice Standard</div>
<div class="voip-price">$28<span class="period">/user/month</span></div> <div class="voip-price">$28<span class="period">/user/month</span></div>
<div class="voip-label">Business Communications</div> <div class="voip-label">Business Communications</div>
<p style="font-size: 6px; font-weight: 600; margin-bottom: 1px;">Everything in Basic, PLUS:</p> <p style="font-size: 8px; font-weight: 600; margin-bottom: 2px;">Everything in Basic, PLUS:</p>
<ul class="voip-features"> <ul class="voip-features">
<li>Voicemail transcription</li> <li>Voicemail transcription</li>
<li>Ring groups & call queues</li> <li>Ring groups & call queues</li>
@@ -717,7 +717,7 @@ ul.feature-list li:before {
<div class="voip-name">GPS-Voice Pro</div> <div class="voip-name">GPS-Voice Pro</div>
<div class="voip-price">$35<span class="period">/user/month</span></div> <div class="voip-price">$35<span class="period">/user/month</span></div>
<div class="voip-label">Advanced Communications</div> <div class="voip-label">Advanced Communications</div>
<p style="font-size: 6px; font-weight: 600; margin-bottom: 1px;">Everything in Standard, PLUS:</p> <p style="font-size: 8px; font-weight: 600; margin-bottom: 2px;">Everything in Standard, PLUS:</p>
<ul class="voip-features"> <ul class="voip-features">
<li>SMS text messaging</li> <li>SMS text messaging</li>
<li>Call recording</li> <li>Call recording</li>
@@ -731,7 +731,7 @@ ul.feature-list li:before {
<div class="voip-name">GPS-Voice Call Center</div> <div class="voip-name">GPS-Voice Call Center</div>
<div class="voip-price">$55<span class="period">/user/month</span></div> <div class="voip-price">$55<span class="period">/user/month</span></div>
<div class="voip-label">Full Contact Center</div> <div class="voip-label">Full Contact Center</div>
<p style="font-size: 6px; font-weight: 600; margin-bottom: 1px;">Everything in Pro, PLUS:</p> <p style="font-size: 8px; font-weight: 600; margin-bottom: 2px;">Everything in Pro, PLUS:</p>
<ul class="voip-features"> <ul class="voip-features">
<li>Call center seat (ACD)</li> <li>Call center seat (ACD)</li>
<li>Real-time dashboards</li> <li>Real-time dashboards</li>
@@ -742,9 +742,9 @@ ul.feature-list li:before {
</div> </div>
</div> </div>
<p style="font-size: 8px; margin: 3px 0;"><strong>VoIP Add-Ons:</strong> Add'l Number: $2.50 | Toll-Free: $4.95 | SMS: $4 | Transcription: $3 | Teams: $8 | Fax: $12/mo</p> <p style="font-size: 10px; margin: 5px 0;"><strong>VoIP Add-Ons:</strong> Add'l Number: $2.50 | Toll-Free: $4.95 | SMS: $4 | Transcription: $3 | Teams: $8 | Fax: $12/mo</p>
<p style="font-size: 8px; margin: 3px 0;"><strong>Phone Hardware:</strong> Basic (T53W): $219 | Business (T54W): $279 | Executive (T57W): $359 | Conference (CP920): $599 | Headset: $159 | Cordless: $199</p> <p style="font-size: 10px; margin: 5px 0;"><strong>Phone Hardware:</strong> Basic (T53W): $219 | Business (T54W): $279 | Executive (T57W): $359 | Conference (CP920): $599 | Headset: $159 | Cordless: $199</p>
<div class="callout-box success"> <div class="callout-box success">
<strong>Special for GPS Clients:</strong> Free number porting + 50% off first month VoIP <strong>Special for GPS Clients:</strong> Free number porting + 50% off first month VoIP
@@ -776,27 +776,27 @@ ul.feature-list li:before {
<h2>Get Started in 3 Easy Steps</h2> <h2>Get Started in 3 Easy Steps</h2>
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 5px 0;"> <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0;">
<div style="text-align: center; padding: 5px; background: #f8f9fa; border-radius: 3px;"> <div style="text-align: center; padding: 8px; background: #f8f9fa; border-radius: 3px;">
<div style="font-size: 18px; color: #f39c12; font-weight: bold;">1</div> <div style="font-size: 20px; color: #f39c12; font-weight: bold;">1</div>
<div style="font-size: 8px; font-weight: bold; color: #1e3c72; margin: 2px 0;">FREE CONSULTATION</div> <div style="font-size: 10px; font-weight: bold; color: #1e3c72; margin: 3px 0;">FREE CONSULTATION</div>
<div style="font-size: 7px;">Call 520.304.8300 for assessment</div> <div style="font-size: 9px;">Call 520.304.8300 for assessment</div>
</div> </div>
<div style="text-align: center; padding: 5px; background: #f8f9fa; border-radius: 3px;"> <div style="text-align: center; padding: 8px; background: #f8f9fa; border-radius: 3px;">
<div style="font-size: 18px; color: #f39c12; font-weight: bold;">2</div> <div style="font-size: 20px; color: #f39c12; font-weight: bold;">2</div>
<div style="font-size: 8px; font-weight: bold; color: #1e3c72; margin: 2px 0;">CUSTOM PROPOSAL</div> <div style="font-size: 10px; font-weight: bold; color: #1e3c72; margin: 3px 0;">CUSTOM PROPOSAL</div>
<div style="font-size: 7px;">Solution for your budget</div> <div style="font-size: 9px;">Solution for your budget</div>
</div> </div>
<div style="text-align: center; padding: 5px; background: #f8f9fa; border-radius: 3px;"> <div style="text-align: center; padding: 8px; background: #f8f9fa; border-radius: 3px;">
<div style="font-size: 18px; color: #f39c12; font-weight: bold;">3</div> <div style="font-size: 20px; color: #f39c12; font-weight: bold;">3</div>
<div style="font-size: 8px; font-weight: bold; color: #1e3c72; margin: 2px 0;">SEAMLESS SETUP</div> <div style="font-size: 10px; font-weight: bold; color: #1e3c72; margin: 3px 0;">SEAMLESS SETUP</div>
<div style="font-size: 7px;">Migration, training, support</div> <div style="font-size: 9px;">Migration, training, support</div>
</div> </div>
</div> </div>
<div style="background: #f8f9fa; padding: 5px; border-left: 4px solid #27ae60; border-radius: 3px; margin: 5px 0 10px 0;"> <div style="background: #f8f9fa; padding: 8px; border-left: 4px solid #27ae60; border-radius: 3px; margin: 8px 0 12px 0;">
<p style="font-size: 8px; font-weight: bold; color: #1e3c72; margin-bottom: 2px;">Our Commitment to You:</p> <p style="font-size: 10px; font-weight: bold; color: #1e3c72; margin-bottom: 3px;">Our Commitment to You:</p>
<ul class="feature-list" style="font-size: 8px;"> <ul class="feature-list" style="font-size: 10px;">
<li>Fast response (2-24 hours by plan)</li> <li>Fast response (2-24 hours by plan)</li>
<li>Proactive monitoring prevents problems</li> <li>Proactive monitoring prevents problems</li>
<li>Transparent pricing, no hidden fees</li> <li>Transparent pricing, no hidden fees</li>
@@ -807,11 +807,11 @@ ul.feature-list li:before {
</div> </div>
<div class="footer"> <div class="footer">
<div style="margin-bottom: 4px;"> <div style="margin-bottom: 5px;">
<strong style="font-size: 11px; color: #f39c12;">Contact Us Today:</strong> <strong style="font-size: 12px; color: #f39c12;">Contact Us Today:</strong>
520.304.8300 | info@azcomputerguru.com | azcomputerguru.com 520.304.8300 | info@azcomputerguru.com | azcomputerguru.com
</div> </div>
<div style="font-size: 8px;"> <div style="font-size: 9px;">
Protecting Tucson Businesses Since 2001 | 7437 E. 22nd St, Tucson, AZ 85710 Protecting Tucson Businesses Since 2001 | 7437 E. 22nd St, Tucson, AZ 85710
</div> </div>
</div> </div>