Files
claudetools/projects/acg-website/v2/contact.html
Mike Swanson 335721066c acg-website: real page-relevant imagery across the whole site (3-AI art direction)
Replace the 5 reused stock images with 21 unique, page-relevant, on-brand images,
art-directed by all three models (Claude curating, Grok generating, Gemini
reviewing each). Every slot now earns its place: server rack on Services, drive
vault on Backup, monitoring desk + on-site install on Managed IT, roadmap on vCIO,
device desk on M365, desk phone on Phones, server blades on Web hosting, a real
workbench on About, and the honest monsoon hero. Contact's window sill is gone
(a warm local computer shop with an OPEN sign now).

- Per-slot aspect handling (21/7 ultra-wide page-head banners, 4/5 portrait story
  figures) so nothing crops; five DISTINCT Tucson beats, not one desert repeated.
- Treatment mix: new .frame--duo-soft (light grade, photo leads) for human/scene
  shots; heavy .frame--duo duotone for infrastructure/landscape.
- Owner-review fixes: cabling re-rolled hands-free (no finger artifacts), clean AP
  ceiling, and 4 nature "LIGHT" shots swapped for on-topic IT imagery (vintage-80s
  computer/ROOTS, offsite backup drives/COPIES, roadmap+compliance/ROADMAP,
  server LEDs/UPTIME); captions updated to match.
- HERO-STRATEGY.md: documented the future seasonal-series / highlight-slider hero
  plan. TODO: added the AI Consultant service + multi-city/Tucson SEO next phases.

Grok image-to-video not producing artifacts (hero video deferred, logged). Old
reused assets now orphaned (safe to prune). Live on ww9.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-23 20:46:33 -07:00

185 lines
14 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>Contact | Arizona Computer Guru</title>
<meta name="description" content="Talk to a human in Tucson. Call 520.304.8300, email info@azcomputerguru.com, or visit 7437 E. 22nd St. No pressure, no pitch." />
<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" type="image/svg+xml" href="assets/acg-g-mark.svg" />
<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>
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"LocalBusiness","name":"Arizona Computer Guru","address":{"@type":"PostalAddress","streetAddress":"7437 E. 22nd St","addressLocality":"Tucson","addressRegion":"AZ","postalCode":"85710","addressCountry":"US"},"telephone":"+1-520-304-8300","email":"info@azcomputerguru.com","url":"https://azcomputerguru.com","openingHours":"Mo-Fr 09:00-17:00"}
</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 101 96" fill="none" stroke-linecap="round" stroke-linejoin="round"><g stroke="currentColor" stroke-width="19.75"><path d="M67 15.09A38 38 0 1 0 85.17 40.1"/><path d="M51.64 45.35 92.5 15.67"/></g><g stroke="var(--accent, #E24A12)" stroke-width="7.75"><path d="M67 15.09A38 38 0 1 0 85.17 40.1"/><path d="M51.64 45.35 92.5 15.67"/></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>&#9728;</span></button>
<button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="siteNav" aria-label="Open menu"><span aria-hidden="true">&#9776;</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.05 / DISPATCH</span>
<span>NO PRESSURE / NO PITCH</span>
<span class="page-head__meta-wide">SAME-DAY REPLY</span>
</p>
<h1 id="page-h" class="page-head__title">
<span class="reveal">Talk to</span>
<span class="accent-word reveal">a human.</span>
</h1>
<div class="page-head__deck">
<p class="page-head__lead reveal">Tell us what is frustrating you, or send over an estimate from the calculator. We will give you honest feedback, even if that is "your current setup is fine, here is one thing to fix."</p>
</div>
</section>
<!-- ============ CONTACT ============ -->
<section class="sect grid-bg" id="contact" aria-labelledby="contact-h">
<div class="wrap">
<h2 id="contact-h" class="sr-only">Contact details and message form</h2>
<div class="contact-grid">
<div class="reveal">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">01</span>
<p class="kicker mono">Where to find us / how to reach us</p>
</div>
<div class="contact-lines">
<div><span class="k">Phone</span><a class="v" href="tel:+15203048300">520.304.8300</a></div>
<div><span class="k">Email</span><a class="v" href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></div>
<div><span class="k">Office</span><span class="v">7437 E. 22nd St, Tucson, AZ 85710</span></div>
<div><span class="k">Hours</span><span class="v">Mon&ndash;Fri 9&ndash;5 / 24/7 emergency for Priority clients</span></div>
<div><span class="k">On the radio</span><span class="v">The Computer Guru Show / Sat 9AM / KVOI 1030AM</span></div>
<div><span class="k">Call the show</span><a class="v" href="tel:+15207902040">520-790-2040</a></div>
</div>
<figure class="story__figure frame frame--duo-soft reveal" style="margin-top:2.4rem;">
<img src="assets/contact-office.png" width="864" height="1152" alt="A warm, lived-in local computer shop at dusk: a service counter with a desk phone, shelves of labeled parts, and an OPEN sign glowing in the window against a desert sunset." loading="lazy" />
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.006 / THE COUNTER</span>
<span class="frame__meta frame__meta--br mono" aria-hidden="true">COME SAY HELLO</span>
</figure>
</div>
<form class="contact-form reveal" id="contactForm" novalidate>
<h3 class="contact-form__title">Send a message</h3>
<div class="form-field">
<label for="cf-name">Your name</label>
<input id="cf-name" name="name" type="text" autocomplete="name" required />
</div>
<div class="form-field">
<label for="cf-biz">Business</label>
<input id="cf-biz" name="business" type="text" autocomplete="organization" />
</div>
<div class="form-field">
<label for="cf-contact">Phone or email</label>
<input id="cf-contact" name="contact" type="text" autocomplete="email" required />
</div>
<div class="form-field">
<label for="cf-msg">What can we help with?</label>
<textarea id="cf-msg" name="message"></textarea>
</div>
<button class="btn btn--primary" type="submit">Send message <span class="arrow" aria-hidden="true">&rarr;</span></button>
<p class="form-note" id="formNote" aria-live="polite">We reply the same business day. (Demo build: this form is not wired to a mailbox.)</p>
</form>
</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-2040</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-2040</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-2040. Tucson's trusted tech talk since 2001.</p>
</aside>
<!-- ============ FAQ ============ -->
<section class="sect sect--surface" id="faq" aria-labelledby="faq-h">
<div class="wrap">
<div class="faq-layout">
<div class="faq-intro">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">02</span>
<p class="kicker mono">Straight answers / ask us anything</p>
</div>
<h2 id="faq-h" class="sect__title reveal">Questions worth asking<br /><span class="accent-word">any IT company.</span></h2>
</div>
<div class="faq-list reveal" id="faqList">
<div class="faq__item"><button class="faq__q" aria-expanded="false" type="button"><span>Will I get a real person, or an offshore call center?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">A real, local person. Our team works out of our Tucson office at 7437 E. 22nd St. You can visit, and after hours you reach an on-call tech who is also local, not a queue overseas.</div></div></div>
<div class="faq__item"><button class="faq__q" aria-expanded="false" type="button"><span>What's your contract term?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">Month-to-month. Cancel with 30 days' notice, no early-termination fee. We would rather earn your business every month than trap you in a three-year agreement.</div></div></div>
<div class="faq__item"><button class="faq__q" aria-expanded="false" type="button"><span>What happens if I use more support hours than my plan includes?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">Plan hours are used first. After that we draw from any pre-paid block time you have banked ($100 to $150/hr), which never expires. No block time? Overage is billed at $175/hr, and we will always flag it before the meter runs.</div></div></div>
<div class="faq__item"><button class="faq__q" aria-expanded="false" type="button"><span>How fast do you respond to an emergency?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">By plan: Standard is 8 hours, Premium 4 hours, Priority 2 hours around the clock. A total outage is escalated immediately regardless of plan, and for local clients we are typically onsite within 1 to 2 hours.</div></div></div>
<div class="faq__item"><button class="faq__q" aria-expanded="false" type="button"><span>What security is actually included?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">GPS-Pro and above include advanced EDR, email security, dark-web monitoring, and monthly security-awareness training. GPS-Advanced adds compliance tooling and ransomware rollback. Basic antivirus alone is not enough anymore, so we do not pretend it is.</div></div></div>
<div class="faq__item"><button class="faq__q" aria-expanded="false" type="button"><span>Can you help me meet cyber-insurance requirements?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">Yes. GPS-Pro covers most of what insurers ask for: MFA enforcement, EDR, training, and cloud backups, and we will provide documentation for your agent. We work with several Tucson insurance agents regularly.</div></div></div>
<div class="faq__item"><button class="faq__q" aria-expanded="false" type="button"><span>What if my team grows or shrinks?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">Billing is per endpoint, so it just follows your headcount. Add three people, add three endpoints; downsize and it drops the next month. No contract amendments, no penalties.</div></div></div>
<div class="faq__item"><button class="faq__q" aria-expanded="false" type="button"><span>Do you really publish your pricing?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">You are looking at it. Our rates are on the pricing page and in the estimator. We think hiding prices is a red flag, in any IT company, including us.</div></div></div>
</div>
</div>
</div>
</section>
</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">&copy; <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>
</body>
</html>