Mike Swanson
722cab36de
Redesign the five subpages (services, pricing, about, contact, calculator) to the v2 premium editorial-brutalist system and wire up one cohesive site (Fable). - Shared byte-identical global header/footer nav across all 6 pages (Home/Services/Pricing/About/Contact + Estimate CTA; aria-current via JS). - services: full 8-service catalog grouped Run/Protect/Connect in a dark band. - pricing: GPS tiers + support/block-time + hosting/M365/phones, all published. - about: origin story + the "locally owned, not an out-of-state acquisition" independence line + a KVOI radio-authority section. - contact: info + form + FAQ accordion (two-column editorial layout). - calculator: functional live estimator with a dark "Monthly Statement" panel (calculator.js); math verified. - Polish pass: contact FAQ two-column split, pricing "everything else" tables as full-width editorial rows, about on-air number scaling, and a real mobile overflow fix (.price-block min-width:0 — 390px now exactly 390 on all pages). All real v1 content/prices/copy preserved; contact form remains a demo stub. Deployed to the ww9 root (v1 pages backed up server-side). Source: v2/. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
193 lines
11 KiB
HTML
193 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Estimate your IT cost | Arizona Computer Guru</title>
|
|
<meta name="description" content="Build a transparent IT estimate in seconds: endpoints, protection tier, support plan, Microsoft 365, phones, and hosting. No email wall, no sales call." />
|
|
<meta name="color-scheme" content="light dark" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="css/v2.css" />
|
|
<link rel="icon" href="assets/acg-mark.svg" type="image/svg+xml" />
|
|
<script>
|
|
(function () { try {
|
|
var s = localStorage.getItem("acg-theme");
|
|
var m = s || (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
|
|
document.documentElement.setAttribute("data-theme", m);
|
|
document.documentElement.classList.add("js");
|
|
} catch (e) {} })();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<a href="#main" class="skip-link">Skip to content</a>
|
|
|
|
<header class="site-header">
|
|
<div class="header-grid">
|
|
<a class="brand" href="index.html" aria-label="Arizona Computer Guru home">
|
|
<span class="brand__mark" aria-hidden="true"><svg viewBox="0 0 100 104" fill="none" stroke="currentColor" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(20 50 54)"><path d="M61.2 26.2 A30 30 0 1 1 38.8 26.2"/><line x1="50" y1="14" x2="50" y2="50"/></g></svg></span>
|
|
<span class="brand__text">
|
|
<span class="brand__name">Arizona Computer Guru</span>
|
|
<span class="brand__since">Concierge IT / Tucson / Est. 2001</span>
|
|
</span>
|
|
</a>
|
|
<nav class="nav" id="siteNav" aria-label="Primary">
|
|
<a class="nav__link" href="index.html">Home</a>
|
|
<a class="nav__link" href="services.html">Services</a>
|
|
<a class="nav__link" href="pricing.html">Pricing</a>
|
|
<a class="nav__link" href="about.html">About</a>
|
|
<a class="nav__link" href="contact.html">Contact</a>
|
|
<a class="nav__link nav__link--mobile" href="calculator.html">Estimate your cost</a>
|
|
<a class="nav__link nav__link--mobile" href="tel:+15203048300">520.304.8300</a>
|
|
</nav>
|
|
<div class="header-actions">
|
|
<a class="nav__cta" href="calculator.html">Estimate</a>
|
|
<a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
|
|
<button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme"><span aria-hidden="true" data-theme-icon>☀</span></button>
|
|
<button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="siteNav" aria-label="Open menu"><span aria-hidden="true">☰</span></button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main">
|
|
|
|
<!-- ============ PAGE HEAD ============ -->
|
|
<section class="page-head" aria-labelledby="page-h">
|
|
<p class="page-head__meta mono reveal">
|
|
<span>DOC.06 / ESTIMATOR</span>
|
|
<span>LIVE MATH / NO EMAIL WALL</span>
|
|
<span class="page-head__meta-wide">SAME RATES WE PUBLISH</span>
|
|
</p>
|
|
<h1 id="page-h" class="page-head__title">
|
|
<span class="reveal">Your IT,</span>
|
|
<span class="t-hollow reveal">accounted for.</span>
|
|
</h1>
|
|
<div class="page-head__deck">
|
|
<p class="page-head__lead reveal">Move the numbers, watch the total. This is the same math we would walk you through in person, with nothing hidden behind a "contact sales" button.</p>
|
|
<div class="page-head__aside reveal">
|
|
<a class="more-link" href="pricing.html">Full pricing breakdown <span class="arrow" aria-hidden="true">→</span></a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ CALCULATOR ============ -->
|
|
<section class="sect grid-bg" id="calculator" aria-labelledby="calc-h">
|
|
<div class="wrap">
|
|
<h2 id="calc-h" class="sr-only">IT cost estimator</h2>
|
|
<div class="calc-grid">
|
|
<form class="calc-inputs reveal" id="calcForm" aria-label="IT cost estimator">
|
|
<div class="calc-row">
|
|
<label for="endpoints">Computers & servers <span class="hint">Every monitored endpoint</span></label>
|
|
<div class="stepper" data-step="endpoints">
|
|
<button type="button" data-dir="-1" aria-label="Fewer endpoints">−</button>
|
|
<input id="endpoints" name="endpoints" type="number" inputmode="numeric" min="0" max="500" value="22" />
|
|
<button type="button" data-dir="1" aria-label="More endpoints">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="calc-row">
|
|
<label for="gpsTier">Protection tier <span class="hint">Per-endpoint monitoring level</span></label>
|
|
<div class="selectwrap"><select id="gpsTier" name="gpsTier">
|
|
<option value="19">GPS-Basic / $19</option>
|
|
<option value="26" selected>GPS-Pro / $26</option>
|
|
<option value="39">GPS-Advanced / $39</option>
|
|
</select></div>
|
|
</div>
|
|
<div class="calc-row">
|
|
<label for="equip">Equipment monitoring <span class="hint">Network gear, printers, NAS. $25/mo</span></label>
|
|
<span class="switch">
|
|
<input type="checkbox" id="equip" name="equip" />
|
|
<span class="track" aria-hidden="true"></span><span class="knob" aria-hidden="true"></span>
|
|
</span>
|
|
</div>
|
|
<div class="calc-row">
|
|
<label for="support">Support plan <span class="hint">Bundled labor hours each month</span></label>
|
|
<div class="selectwrap"><select id="support" name="support">
|
|
<option value="0">None, pay as you go</option>
|
|
<option value="200">Essential / $200 (2 hr)</option>
|
|
<option value="380" selected>Standard / $380 (4 hr)</option>
|
|
<option value="540">Premium / $540 (6 hr)</option>
|
|
<option value="850">Priority / $850 (10 hr)</option>
|
|
</select></div>
|
|
</div>
|
|
<div class="calc-row">
|
|
<label for="m365">Microsoft 365 users <span class="hint">Business Standard, $14/user</span></label>
|
|
<div class="stepper" data-step="m365">
|
|
<button type="button" data-dir="-1" aria-label="Fewer Microsoft 365 users">−</button>
|
|
<input id="m365" name="m365" type="number" inputmode="numeric" min="0" max="500" value="0" />
|
|
<button type="button" data-dir="1" aria-label="More Microsoft 365 users">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="calc-row">
|
|
<label for="voip">Business phone users <span class="hint">GPS-Voice Standard, $28/user</span></label>
|
|
<div class="stepper" data-step="voip">
|
|
<button type="button" data-dir="-1" aria-label="Fewer phone users">−</button>
|
|
<input id="voip" name="voip" type="number" inputmode="numeric" min="0" max="500" value="0" />
|
|
<button type="button" data-dir="1" aria-label="More phone users">+</button>
|
|
</div>
|
|
</div>
|
|
<div class="calc-row">
|
|
<label for="hosting">Web hosting <span class="hint">Managed, with SSL & backups</span></label>
|
|
<div class="selectwrap"><select id="hosting" name="hosting">
|
|
<option value="0" selected>None</option>
|
|
<option value="15">Starter / $15</option>
|
|
<option value="35">Business / $35</option>
|
|
<option value="65">Commerce / $65</option>
|
|
</select></div>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="calc-out reveal">
|
|
<h3 class="calc-out__title">Monthly statement</h3>
|
|
<div class="ledger-lines" id="ledgerLines"></div>
|
|
<div class="calc-total" aria-live="polite">
|
|
<span class="tlabel">Per month</span>
|
|
<span class="tnum mono" id="totalMonthly">$0</span>
|
|
</div>
|
|
<div class="calc-annual mono" id="totalAnnual">$0 / year</div>
|
|
<div class="calc-perep mono" id="perEndpoint">all-in, per endpoint / mo</div>
|
|
<a class="btn btn--primary btn--band calc-cta" href="contact.html#contact" id="sendEstimate">Send me this estimate <span class="arrow" aria-hidden="true">→</span></a>
|
|
<p class="calc-foot">Estimate only, your real quote is tailored to your setup. No card, no commitment, and we will tell you if you are buying more than you need.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ RADIO TICKER ============ -->
|
|
<aside class="ticker" aria-label="The Computer Guru Show radio information">
|
|
<div class="ticker__track" aria-hidden="true">
|
|
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
|
|
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
|
|
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
|
|
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
|
|
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
|
|
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
|
|
</div>
|
|
<p class="sr-only">The Computer Guru Show, Saturdays 9AM on KVOI 1030AM. Call in live: 520-790-2020. Tucson's trusted tech talk since 2001.</p>
|
|
</aside>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="wrap footer-grid">
|
|
<div class="footer-col">
|
|
<p class="footer-brand">Arizona Computer Guru</p>
|
|
<p class="mono footer-line">Tucson-born / Arizona-wide / since 2001</p>
|
|
<p class="mono footer-line">7437 E. 22nd St, Tucson, AZ 85710</p>
|
|
</div>
|
|
<div class="footer-col">
|
|
<p class="mono footer-line"><a href="tel:+15203048300">520.304.8300</a></p>
|
|
<p class="mono footer-line"><a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
|
|
<p class="mono footer-line">The Computer Guru Show / Sat 9AM / KVOI 1030AM</p>
|
|
</div>
|
|
<div class="footer-col footer-col--meta">
|
|
<p class="mono footer-line">© <span id="year">2026</span> ACG / 32.2226N 110.9747W</p>
|
|
<p class="mono footer-line">100% local. Never offshore.</p>
|
|
</div>
|
|
<p class="disclaimer mono">Local demonstration build of a proposed azcomputerguru.com. Pricing reflects published GPS rates and is illustrative for the estimator; a real quote is tailored to your environment. Photography is representational.</p>
|
|
</div>
|
|
</footer>
|
|
<script src="js/v2.js"></script>
|
|
<script src="js/calculator.js"></script>
|
|
</body>
|
|
</html>
|