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>
@@ -27,6 +27,13 @@
|
||||
## In progress / next
|
||||
- Nothing actively in progress. Next up is the go-live backlog below.
|
||||
|
||||
## Next phases (Mike's direction, 2026-07-23)
|
||||
- [ ] **AI Consultant service** (near-term, key offering). ACG has deep, real AI experience and clients are already asking for AI training + consultation. Position as HONEST, practical AI guidance, cut through the hype, safe/sane adoption, hands-on training, not buzzword-AI. This is a genuine differentiator: the competitor research showed every MSP shouts "AI" as noise; ACG's angle is "we've actually done this, here's straight help," which lands squarely on the anti-BS / anti-weaponized-ignorance ethos. Site work: add as a service in "THE INDEX" (+ its detail page like the others), a homepage nod, and pricing/packaging for training vs advisory vs implementation. Scope with Mike before building.
|
||||
- [ ] **SEO strategy: dominate Tucson + target other AZ cities** (after the AI service). Beyond the on-page signals already shipped (animated hero, crawlable service-area strip, LocalBusiness `areaServed` schema): real multi-city ranking needs **dedicated location pages** (e.g. /managed-it-phoenix, /it-services-mesa) with UNIQUE local content + per-city LocalBusiness schema; **Google Business Profile** optimization + reviews for local pack; a **local content engine** (the forum "field reports" + radio-show recaps feed this) for authority; leaning on the real differentiators (locally-owned-since-2001, on-air authority, "not a California roll-up"); internal linking + local citations/backlinks. Needs a proper SEO plan doc before execution.
|
||||
|
||||
## Hero image series (strategy documented, build later)
|
||||
- [ ] **Rotating hero image series** — seasonal set (summer/monsoon done; spring/fall/winter to generate) with a JS season-selector, and/or a highlight slider. Full plan in `projects/acg-website/v2/HERO-STRATEGY.md`. Brand: wide 21/8 duotone, "in this place not tourism," Grok-generated. Hero video deferred (Grok image_to_video not producing artifacts yet).
|
||||
|
||||
## Small follow-ups (from the detail-pages build)
|
||||
- [ ] Detail-page figures reuse the 5 existing stock images (some repeat across the 8 pages) — bespoke per-service imagery would lift them (ties into image finals).
|
||||
- [ ] "vCIO & Compliance" and "Projects & Block Time" have no card on the homepage "THE INDEX" (only on `services.html`) — add homepage cards if wanted.
|
||||
|
||||
38
projects/acg-website/v2/HERO-STRATEGY.md
Normal file
@@ -0,0 +1,38 @@
|
||||
# Hero Image Strategy — azcomputerguru.com
|
||||
|
||||
> Documented 2026-07-23 for a later pass. The homepage hero should become a
|
||||
> ROTATING SERIES, not one static shot. Two directions (Mike), which can combine:
|
||||
> **(1) a seasonal series** (hero changes with the Tucson season), and/or
|
||||
> **(2) a highlight slider** (a carousel that spotlights different things).
|
||||
> See `[[project_acg_website_redesign]]`. Current hero = the monsoon still (summer).
|
||||
|
||||
## Brand constraints (every hero image)
|
||||
- **Ink + signal-orange DUOTONE**, cinematic, grainy 35mm, moody premium — matches the current monsoon hero (`assets/hero.png`). Apply the site's `.frame--duo` (heavy) so the whole series matches automatically.
|
||||
- **WIDE aspect.** The hero frame is `aspect-ratio: 21/8` (≈ 2.6; `3/2` on mobile). Grok's widest output is ~2.22 (1280×576), which crops ~13% off the sides in the 21/8 frame — so **compose the subject as a centered horizontal band**. (If we ever want edge-perfect heroes, the fix is narrowing/tightening the `.hero__figure` frame in CSS.)
|
||||
- **"Business in this place, not tourism."** Tucson-rooted with a subtle sign of service/work (a two-lane service road, distant city-lights glow, a service-van silhouette) — never a bare postcard. The current monsoon hero (saguaros + service road + valley glow) is the reference for tone.
|
||||
- No text, no logos, no slop (no 3D, holograms, glowing shields, circuit-board patterns).
|
||||
|
||||
## Option 1 — Seasonal series (Tucson seasons)
|
||||
One wide duotone hero per season; a tiny JS snippet auto-selects by current month.
|
||||
- **Summer / monsoon (Jul–Sep):** the current `hero.png` — monsoon twilight, saguaros, service road, storm light. **DONE.**
|
||||
- **Spring (Mar–May):** desert in bloom — saguaro/ocotillo flowers, palo verde gold, soft clear light.
|
||||
- **Fall (Oct–Nov):** low golden light, long shadows, warm dry palette, a clear evening.
|
||||
- **Winter (Dec–Feb):** snow dusting the Catalinas above the saguaros, crisp cold light (still graded to the warm orange palette).
|
||||
Naming: `hero-summer.png` (= current), `hero-spring.png`, `hero-fall.png`, `hero-winter.png`. Selector: `new Date().getMonth()` → season → swap `<img src>` (or `<picture>`).
|
||||
|
||||
## Option 2 — Highlight slider (alternative / additional)
|
||||
A subtle crossfade carousel to spotlight different things:
|
||||
- A specific service or seasonal promo, the radio show ("Ask the Guru" / KVOI), "since 2001," a limited offer.
|
||||
- Each slide = a wide duotone hero, optionally paired with a different headline overlay.
|
||||
- Implementation: a small JS crossfade (respect `prefers-reduced-motion` → hold on one slide, no auto-advance); or a seasonal auto-pick that is effectively a 4-slide set. Keep it restrained — the hero is the brand's first impression, not a billboard.
|
||||
|
||||
## Generation recipe
|
||||
- `bash .claude/skills/grok/scripts/ask-grok.sh image "<prompt> … wide 21:9 cinematic landscape composition, subject as a centered horizontal band …" projects/acg-website/v2/assets/hero-<name>.png`
|
||||
- Grok `grok-4.5` image gen (working as of 2026-07-23). Keep every prompt anchored to the monsoon reference (same palette, grain, "in this place" framing) so the series reads as one family.
|
||||
- Let `.frame--duo` do the ink+orange grade at render time — generate reasonably neutral-but-warm source, don't pre-crush it.
|
||||
|
||||
## Video option (deferred)
|
||||
A hero could be a subtle looping VIDEO (slow push-in / drifting storm light) instead of a still. Grok's `image_to_video` returned **no artifact** on two tries 2026-07-23 (logged to errorlog). Retry later via Grok or another tool. If used: muted autoplay loop, the still as `poster`, and gate it off under `prefers-reduced-motion` (show the still).
|
||||
|
||||
## Status
|
||||
Not built — strategy only. Do when ready: generate the 3 remaining seasonal heroes (spring/fall/winter) + the JS season-selector, OR the highlight slider. Tracked in `TODO.md`.
|
||||
@@ -69,8 +69,8 @@
|
||||
<a class="btn btn--ghost" href="contact.html">Talk to a human</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="page-head__figure frame frame--duo reveal">
|
||||
<img src="assets/about.png" width="1248" height="832" alt="A friendly handshake over a wooden desk with a laptop and a handwritten notebook, an Arizona map framed on the wall." />
|
||||
<figure class="page-head__figure frame frame--duo-soft reveal">
|
||||
<img src="assets/crew.png" width="1280" height="576" alt="An IT technician at a real workbench soldering a circuit board beside an open laptop, a multimeter, hand tools, and parts bins under a warm task lamp." />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.004 / CREW</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">EST.2001 / TUCSON AZ</span>
|
||||
</figure>
|
||||
@@ -94,10 +94,10 @@
|
||||
<p class="reveal">That is still the whole point. The thing we cannot stand is anyone using what they know to take advantage of what you do not. A good, honest IT company should not be rare, but it is, and finding one can feel a lot like finding an honest car mechanic. We built Arizona Computer Guru to be that honest team: straight answers, fair prices, and people who treat you with respect whether you are asking about a server migration or a printer that will not stop jamming.</p>
|
||||
<p class="reveal">More than two decades later we look after businesses across Tucson, from small offices to busy practices and job sites. We still fix things when they break, we still run entire networks for the clients who want that handled, and either way you get the same team and the same honest billing. We are still locally owned, not an out-of-state acquisition wearing a familiar name, and we still answer our own phones.</p>
|
||||
</div>
|
||||
<figure class="story__figure frame frame--duo reveal">
|
||||
<img src="assets/story.png" width="1248" height="832" alt="Warm afternoon desert light raking across a white stucco wall meeting a clean wooden windowsill." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.005 / LIGHT</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">SONORAN DESERT / AZ</span>
|
||||
<figure class="story__figure frame frame--duo-soft reveal">
|
||||
<img src="assets/about-roots.png" width="864" height="1152" alt="A vintage early-1980s beige personal computer and CRT monitor with a mechanical keyboard on a wooden desk, floppy disks and a manual under warm lamplight." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.005 / ROOTS</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">WHERE IT STARTED</span>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
BIN
projects/acg-website/v2/assets/about-roots.png
Normal file
|
After Width: | Height: | Size: 313 KiB |
BIN
projects/acg-website/v2/assets/backup-copies.png
Normal file
|
After Width: | Height: | Size: 271 KiB |
BIN
projects/acg-website/v2/assets/build.png
Normal file
|
After Width: | Height: | Size: 250 KiB |
BIN
projects/acg-website/v2/assets/cage.png
Normal file
|
After Width: | Height: | Size: 299 KiB |
BIN
projects/acg-website/v2/assets/contact-office.png
Normal file
|
After Width: | Height: | Size: 274 KiB |
BIN
projects/acg-website/v2/assets/crew-two.png
Normal file
|
After Width: | Height: | Size: 235 KiB |
BIN
projects/acg-website/v2/assets/crew.png
Normal file
|
After Width: | Height: | Size: 178 KiB |
BIN
projects/acg-website/v2/assets/field.png
Normal file
|
After Width: | Height: | Size: 156 KiB |
|
Before Width: | Height: | Size: 226 KiB After Width: | Height: | Size: 168 KiB |
BIN
projects/acg-website/v2/assets/host-uptime.png
Normal file
|
After Width: | Height: | Size: 305 KiB |
BIN
projects/acg-website/v2/assets/host.png
Normal file
|
After Width: | Height: | Size: 258 KiB |
BIN
projects/acg-website/v2/assets/install-ap.png
Normal file
|
After Width: | Height: | Size: 334 KiB |
BIN
projects/acg-website/v2/assets/install-ap2.png
Normal file
|
After Width: | Height: | Size: 236 KiB |
BIN
projects/acg-website/v2/assets/light-bluehour.png
Normal file
|
After Width: | Height: | Size: 286 KiB |
BIN
projects/acg-website/v2/assets/light-foothills.png
Normal file
|
After Width: | Height: | Size: 326 KiB |
BIN
projects/acg-website/v2/assets/light-night.png
Normal file
|
After Width: | Height: | Size: 350 KiB |
BIN
projects/acg-website/v2/assets/light-wash.png
Normal file
|
After Width: | Height: | Size: 381 KiB |
BIN
projects/acg-website/v2/assets/mail-desk.png
Normal file
|
After Width: | Height: | Size: 164 KiB |
BIN
projects/acg-website/v2/assets/noc-desk.png
Normal file
|
After Width: | Height: | Size: 150 KiB |
BIN
projects/acg-website/v2/assets/rack.png
Normal file
|
After Width: | Height: | Size: 319 KiB |
BIN
projects/acg-website/v2/assets/strategy.png
Normal file
|
After Width: | Height: | Size: 167 KiB |
BIN
projects/acg-website/v2/assets/terminate.png
Normal file
|
After Width: | Height: | Size: 275 KiB |
BIN
projects/acg-website/v2/assets/terminate3.png
Normal file
|
After Width: | Height: | Size: 249 KiB |
BIN
projects/acg-website/v2/assets/vault.png
Normal file
|
After Width: | Height: | Size: 268 KiB |
BIN
projects/acg-website/v2/assets/vcio-roadmap.png
Normal file
|
After Width: | Height: | Size: 266 KiB |
BIN
projects/acg-website/v2/assets/voice-rack.png
Normal file
|
After Width: | Height: | Size: 309 KiB |
BIN
projects/acg-website/v2/assets/voice.png
Normal file
|
After Width: | Height: | Size: 195 KiB |
BIN
projects/acg-website/v2/assets/watch-desk.png
Normal file
|
After Width: | Height: | Size: 535 KiB |
@@ -72,7 +72,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<figure class="page-head__figure frame frame--duo reveal">
|
||||
<img src="assets/field-gen.png" width="1248" height="832" alt="A technician's hands terminating network cable at a dense patch panel." loading="lazy" />
|
||||
<img src="assets/vault.png" width="1280" height="576" alt="A dense backup storage array of identical drive bays inside a secured rack enclosure, with two orange drive trays pulled out on rails revealing the carriers." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.012 / VAULT</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">7437 E 22ND ST / TUCSON</span>
|
||||
</figure>
|
||||
@@ -93,9 +93,9 @@
|
||||
<p class="pull reveal">A bad day should be an inconvenience, not a closure. That is the entire reason we do this the careful way.</p>
|
||||
</div>
|
||||
<figure class="story__figure frame frame--duo reveal">
|
||||
<img src="assets/story.png" width="1248" height="832" alt="Warm afternoon desert light raking across a white stucco wall meeting a clean wooden windowsill." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.022 / LIGHT</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">SONORAN DESERT / AZ</span>
|
||||
<img src="assets/backup-copies.png" width="864" height="1152" alt="A hand pulling a hand-labeled offsite backup drive from a rack of labeled drive bays, redundant copies." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.022 / COPIES</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">OFFSITE / REDUNDANT</span>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -71,8 +71,8 @@
|
||||
<a class="btn btn--ghost" href="contact.html">Talk to a human</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="page-head__figure frame frame--duo reveal">
|
||||
<img src="assets/hero-gen.png" width="1248" height="832" alt="Monsoon light over the Tucson valley, saguaro silhouettes against the Santa Catalina mountains." loading="lazy" />
|
||||
<figure class="page-head__figure frame frame--duo-soft reveal">
|
||||
<img src="assets/voice.png" width="1280" height="576" alt="A modern black IP desk phone with an orange coiled handset cable beside a professional headset with orange accents on a warm wood desk." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.017 / VOICE</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">7437 E 22ND ST / TUCSON</span>
|
||||
</figure>
|
||||
@@ -93,9 +93,9 @@
|
||||
<p class="pull reveal">Four tiers, no per-minute surprises. You know the bill before the month starts.</p>
|
||||
</div>
|
||||
<figure class="story__figure frame frame--duo reveal">
|
||||
<img src="assets/services.png" width="1248" height="832" alt="A tidy wall-mounted patch panel and small network switch with neatly dressed cables on a wooden shelf in warm light." loading="lazy" />
|
||||
<img src="assets/voice-rack.png" width="864" height="1152" alt="A network rack with stacked PoE switches, a labeled patch panel, and neatly bundled blue and grey cables feeding down to a small voice gateway appliance." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.027 / RACK</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">SONORAN DESERT / AZ</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">VOICE EDGE / POE</span>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -89,9 +89,9 @@
|
||||
<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 reveal" style="margin-top:2.4rem;">
|
||||
<img src="assets/story.png" width="1248" height="832" alt="Warm afternoon desert light raking across a white stucco wall meeting a clean wooden windowsill." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.006 / EAST SIDE</span>
|
||||
<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>
|
||||
|
||||
@@ -220,6 +220,24 @@ a:focus-visible, button:focus-visible {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
|
||||
mix-blend-mode: overlay; opacity: 0.35;
|
||||
}
|
||||
/* Lighter "mix" treatment for human/scene shots: keep the real photo (colour,
|
||||
detail, warmth) with only a subtle warm/ink grade + light grain. Photography
|
||||
leads; brand tints. Use on shop/workbench/desk/people images. */
|
||||
.frame--duo-soft { background: var(--surface); }
|
||||
.frame--duo-soft img {
|
||||
width: 100%; height: 100%; object-fit: cover;
|
||||
filter: contrast(1.05) saturate(1.02) brightness(1.02);
|
||||
}
|
||||
.frame--duo-soft::before {
|
||||
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
|
||||
background: linear-gradient(158deg, rgba(226, 74, 18, 0.12), rgba(12, 8, 5, 0.16));
|
||||
mix-blend-mode: soft-light; opacity: 0.85;
|
||||
}
|
||||
.frame--duo-soft::after {
|
||||
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
|
||||
mix-blend-mode: overlay; opacity: 0.16;
|
||||
}
|
||||
.frame__meta {
|
||||
position: absolute; z-index: 3;
|
||||
font-size: 0.62rem; letter-spacing: 0.14em;
|
||||
|
||||
@@ -71,9 +71,9 @@
|
||||
<a class="btn btn--ghost" href="contact.html">Talk to a human</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="page-head__figure frame frame--duo reveal">
|
||||
<img src="assets/field-gen.png" width="1248" height="832" alt="A technician's hands terminating network cable at a dense patch panel." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.014 / GUARD</span>
|
||||
<figure class="page-head__figure frame frame--duo-soft reveal">
|
||||
<img src="assets/watch-desk.png" width="1280" height="449" alt="A dark security operations watch desk, dual monitors showing blurred network topology and alert panels, hands on a keyboard lit by restrained amber status LEDs." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.014 / WATCH</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">7437 E 22ND ST / TUCSON</span>
|
||||
</figure>
|
||||
</section>
|
||||
@@ -93,9 +93,9 @@
|
||||
<p class="pull reveal">Basic antivirus alone is not enough anymore, so we do not pretend it is.</p>
|
||||
</div>
|
||||
<figure class="story__figure frame frame--duo reveal">
|
||||
<img src="assets/hero-gen.png" width="1248" height="832" alt="Monsoon light over the Tucson valley, saguaro silhouettes against the Santa Catalina mountains." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.024 / WATCH</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">SONORAN DESERT / AZ</span>
|
||||
<img src="assets/cage.png" width="864" height="1152" alt="A secure server cage with a heavy steel mesh door slightly ajar over LED-lit servers, a real padlock latched on the door and a badge reader on the wall under a warm practical light." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.024 / GUARD</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">LOCKED DOWN / 24-7</span>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
<p class="hero__note mono reveal"><span>// month-to-month</span><span>// no lock-in</span><span>// no offshore call centers</span></p>
|
||||
</div>
|
||||
<figure class="hero__figure frame frame--duo reveal">
|
||||
<img src="assets/hero-gen.png" width="1280" height="720" alt="Monsoon light over the Tucson valley, saguaro silhouettes against the Santa Catalina mountains." />
|
||||
<img src="assets/hero.png" width="1280" height="576" alt="Sonoran monsoon twilight outside Tucson: saguaro silhouettes and a quiet two-lane service road, with the city lights of the valley glowing beneath a break of warm storm light." />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.001 / HERO</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">32.2226N 110.9747W / DUO-INK+ORG</span>
|
||||
</figure>
|
||||
@@ -163,7 +163,7 @@
|
||||
<a class="more-link more-link--band reveal" href="about.html">Read our story <span class="arrow" aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<figure class="manifesto__figure frame frame--duo frame--band reveal">
|
||||
<img src="assets/field-gen.png" width="864" height="1152" alt="A technician's hands terminating network cable at a dense patch panel." loading="lazy" />
|
||||
<img src="assets/field.png" width="1280" height="576" alt="A technician's hands dressing bundled network cables into a rack-mounted patch panel under warm task light." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.002 / FIELD</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">7437 E 22ND ST / TUCSON</span>
|
||||
</figure>
|
||||
|
||||
@@ -71,9 +71,9 @@
|
||||
<a class="btn btn--ghost" href="contact.html">Talk to a human</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="page-head__figure frame frame--duo reveal">
|
||||
<img src="assets/services.png" width="1248" height="832" alt="A tidy wall-mounted patch panel and small network switch with neatly dressed cables on a wooden shelf in warm light." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.011 / RACK</span>
|
||||
<figure class="page-head__figure frame frame--duo-soft reveal">
|
||||
<img src="assets/noc-desk.png" width="1280" height="576" alt="A dim managed-services monitoring desk in the evening, several monitors showing network graphs and dashboards, an empty chair and a coffee mug lit by monitor glow." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.011 / MONITOR</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">7437 E 22ND ST / TUCSON</span>
|
||||
</figure>
|
||||
</section>
|
||||
@@ -92,10 +92,10 @@
|
||||
<p class="reveal">This is the fully-managed end of the spectrum: you are not paying us more when things go wrong. You pay one predictable price per computer, and our whole job is to keep those computers boring, quiet, and working.</p>
|
||||
<p class="pull reveal">One flat price per computer, no surprise invoices when something breaks, and work we stand behind.</p>
|
||||
</div>
|
||||
<figure class="story__figure frame frame--duo reveal">
|
||||
<img src="assets/field-gen.png" width="1248" height="832" alt="A technician's hands terminating network cable at a dense patch panel." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.021 / FIELD</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">SONORAN DESERT / AZ</span>
|
||||
<figure class="story__figure frame frame--duo-soft reveal">
|
||||
<img src="assets/install-ap2.png" width="864" height="1152" alt="A technician cleanly mounting a wireless access point to a bright modern drop-ceiling, a neatly labeled coiled cable and a stepladder with a tool pouch in frame." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.021 / ON-SITE</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">ON-SITE / TUCSON</span>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -71,8 +71,8 @@
|
||||
<a class="btn btn--ghost" href="contact.html">Talk to a human</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="page-head__figure frame frame--duo reveal">
|
||||
<img src="assets/story.png" width="1248" height="832" alt="Warm afternoon desert light raking across a white stucco wall meeting a clean wooden windowsill." loading="lazy" />
|
||||
<figure class="page-head__figure frame frame--duo-soft reveal">
|
||||
<img src="assets/mail-desk.png" width="1280" height="576" alt="A clean modern desk in warm morning light with an open laptop, a tablet on a stand, a smartphone, and a notebook with an orange pen: connected, synced work." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.016 / MAIL</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">7437 E 22ND ST / TUCSON</span>
|
||||
</figure>
|
||||
@@ -93,9 +93,9 @@
|
||||
<p class="pull reveal">Configured, secured, and supported by people you can call. That last part is the whole difference.</p>
|
||||
</div>
|
||||
<figure class="story__figure frame frame--duo reveal">
|
||||
<img src="assets/about.png" width="1248" height="832" alt="A friendly handshake over a wooden desk with a laptop and a handwritten notebook, an Arizona map framed on the wall." loading="lazy" />
|
||||
<img src="assets/crew-two.png" width="864" height="1152" alt="Two colleagues at a desk reviewing a laptop together, one pointing at the screen, in a warm natural office with a coffee mug and papers." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.026 / CREW</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">SONORAN DESERT / AZ</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">SHARED WORK / TUCSON</span>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<figure class="page-head__figure frame frame--duo reveal">
|
||||
<img src="assets/services.png" width="1248" height="832" alt="A tidy wall-mounted patch panel and small network switch with neatly dressed cables on a wooden shelf in warm light." loading="lazy" />
|
||||
<img src="assets/build.png" width="1280" height="576" alt="A knolled flat-lay of a network buildout kit on dark slate: a cable reel, crimpers, a cable tester, coiled blue and orange patch cables, parts bags, and rolled rack blueprints." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.013 / BUILD</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">7437 E 22ND ST / TUCSON</span>
|
||||
</figure>
|
||||
@@ -92,10 +92,10 @@
|
||||
<p class="reveal">Block time is for everything in between. You pre-pay a bank of hours at a lower rate and draw them down as things come up, on your schedule. The hours never expire, so there is no pressure to burn them and no penalty for saving them.</p>
|
||||
<p class="pull reveal">There is never a charge to find out what something will cost. Ask, and you get a straight number.</p>
|
||||
</div>
|
||||
<figure class="story__figure frame frame--duo reveal">
|
||||
<img src="assets/field-gen.png" width="1248" height="832" alt="A technician's hands terminating network cable at a dense patch panel." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.023 / FIELD</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">SONORAN DESERT / AZ</span>
|
||||
<figure class="story__figure frame frame--duo-soft reveal">
|
||||
<img src="assets/terminate3.png" width="864" height="1152" alt="A punch-down tool seating colored Cat6 cable pairs into a keystone jack on a wall plate, copper conductors in crisp focus." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.023 / CABLE</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">STRUCTURED CABLING</span>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<figure class="page-head__figure frame frame--duo reveal">
|
||||
<img src="assets/services.png" width="1248" height="832" alt="A tidy wall-mounted patch panel and small network switch with neatly dressed cables on a wooden shelf in warm light." />
|
||||
<img src="assets/rack.png" width="1280" height="576" alt="A real open server rack with mixed enterprise switches and servers, blue and orange patch cables neatly dressed down the side, and a perforated door standing open." />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.003 / RACK</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">7437 E 22ND ST / TUCSON</span>
|
||||
</figure>
|
||||
|
||||
@@ -71,8 +71,8 @@
|
||||
<a class="btn btn--ghost" href="contact.html">Talk to a human</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="page-head__figure frame frame--duo reveal">
|
||||
<img src="assets/about.png" width="1248" height="832" alt="A friendly handshake over a wooden desk with a laptop and a handwritten notebook, an Arizona map framed on the wall." loading="lazy" />
|
||||
<figure class="page-head__figure frame frame--duo-soft reveal">
|
||||
<img src="assets/strategy.png" width="1280" height="576" alt="A top-down view of a hand sketching a network and compliance roadmap of boxes and arrows on paper with an orange marker, sticky notes and a laptop alongside." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.015 / STRATEGY</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">7437 E 22ND ST / TUCSON</span>
|
||||
</figure>
|
||||
@@ -92,10 +92,10 @@
|
||||
<p class="reveal">Compliance is the other half. Whether it is HIPAA, SOC, or the ever-growing cyber-insurance questionnaire, someone has to turn on the right controls, keep the evidence, and hand it over when an auditor or an insurer asks. That is the unglamorous work we take off your desk.</p>
|
||||
<p class="pull reveal">We help you check the boxes auditors and insurers ask for, and then we hand you the paperwork.</p>
|
||||
</div>
|
||||
<figure class="story__figure frame frame--duo reveal">
|
||||
<img src="assets/story.png" width="1248" height="832" alt="Warm afternoon desert light raking across a white stucco wall meeting a clean wooden windowsill." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.025 / LIGHT</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">SONORAN DESERT / AZ</span>
|
||||
<figure class="story__figure frame frame--duo-soft reveal">
|
||||
<img src="assets/vcio-roadmap.png" width="864" height="1152" alt="A printed IT roadmap and a compliance checklist binder on a desk with a pen and highlighter, a laptop soft in the background." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.025 / ROADMAP</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">STRATEGY / PLAN</span>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<figure class="page-head__figure frame frame--duo reveal">
|
||||
<img src="assets/services.png" width="1248" height="832" alt="A tidy wall-mounted patch panel and small network switch with neatly dressed cables on a wooden shelf in warm light." loading="lazy" />
|
||||
<img src="assets/host.png" width="1280" height="576" alt="A datacenter cold aisle of tall perforated server cabinets receding to a vanishing point, restrained orange status LEDs and floor lighting in the dark." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.018 / HOST</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">7437 E 22ND ST / TUCSON</span>
|
||||
</figure>
|
||||
@@ -93,9 +93,9 @@
|
||||
<p class="pull reveal">A real person, not a ticket robot, when something needs a hand.</p>
|
||||
</div>
|
||||
<figure class="story__figure frame frame--duo reveal">
|
||||
<img src="assets/story.png" width="1248" height="832" alt="Warm afternoon desert light raking across a white stucco wall meeting a clean wooden windowsill." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.028 / LIGHT</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">SONORAN DESERT / AZ</span>
|
||||
<img src="assets/host-uptime.png" width="864" height="1152" alt="A close-up of glowing green and amber server status LEDs and neat bundles of fiber-optic patch cables in a hosting rack, uptime and redundancy." loading="lazy" />
|
||||
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.028 / UPTIME</span>
|
||||
<span class="frame__meta frame__meta--br mono" aria-hidden="true">ALWAYS ON / TUCSON</span>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||