acg-website: Phase 3B - radio show promotion, funnel, enhanced CTAs, layout density
Radio Show Promotion: - Add LIVE badge to header phone with subtle pulse animation - Add radio promo bar under hero (show name, time, call-in number) - Radio ticker at bottom remains from Phase 3A 3-Step Visual Funnel: - New funnel-steps section after Trust - Progression: 1. Build estimate → 2. Talk it through → 3. Month-to-month start - Interactive number badges with hover lift + color fill - Mobile responsive (stacks vertically on small screens) Strengthen Calculator CTAs: - Pricing teaser: Make 'Build your exact price' primary button (was more-link) - All 6 service cards: Add inline 'See what this costs →' calculator links - Guides prospect directly to calculator from any service mention Increase Vertical Rhythm: - Section padding: clamp(2.75rem, 5.5vw, 4.25rem) for breathing room - Service list: +1.5x base margin-bottom after dense grid - Dispatch grid: +1.5x base margin-bottom after blog cards All changes deployed to ww9.azcomputerguru.com and verified live. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -43,7 +43,7 @@
|
||||
<a class="nav__link" href="about.html">About</a>
|
||||
<a class="nav__link" href="contact.html">Contact</a>
|
||||
</div>
|
||||
<a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
|
||||
<a class="nav__phone" href="tel:+15203048300">520.304.8300 <span class="radio-badge" title="The Computer Guru Show - Saturdays 9AM KVOI 1030AM">▶ LIVE</span></a>
|
||||
<button class="skin-toggle" id="skinToggle" type="button" aria-label="Switch visual skin (Bold, Midnight, or Verdigris)" title="Switch skin: Bold / Midnight / Verdigris"><span class="sw" aria-hidden="true"></span></button>
|
||||
<button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme" title="Toggle light / dark"><span aria-hidden="true" data-theme-icon>☀</span></button>
|
||||
<button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="navLinks" aria-label="Open menu">≡</button>
|
||||
@@ -72,6 +72,15 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- RADIO PROMO BAR -->
|
||||
<aside class="radio-promo" aria-label="Radio show information">
|
||||
<div class="wrap" style="display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;">
|
||||
<strong>The Computer Guru Show</strong>
|
||||
<span>Saturdays <span class="time">9AM</span> on KVOI 1030AM</span>
|
||||
<span style="margin-left:auto;">Call in: <strong>520-790-2020</strong></span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- TRUST -->
|
||||
<section class="trust" aria-label="Why businesses stay with us" style="padding-block:0;">
|
||||
<div class="wrap">
|
||||
@@ -82,6 +91,31 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3-STEP FUNNEL -->
|
||||
<section class="funnel-steps" aria-label="How to get started">
|
||||
<div class="wrap">
|
||||
<div class="funnel-track">
|
||||
<div class="funnel-step reveal">
|
||||
<div class="funnel-step__num">1</div>
|
||||
<div class="funnel-step__label">Build your estimate</div>
|
||||
<a class="funnel-step__link" href="calculator.html">Calculator <span class="arrow" aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="funnel-connector" aria-hidden="true">→</div>
|
||||
<div class="funnel-step reveal">
|
||||
<div class="funnel-step__num">2</div>
|
||||
<div class="funnel-step__label">Talk it through</div>
|
||||
<a class="funnel-step__link" href="contact.html">Contact <span class="arrow" aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<div class="funnel-connector" aria-hidden="true">→</div>
|
||||
<div class="funnel-step reveal">
|
||||
<div class="funnel-step__num">3</div>
|
||||
<div class="funnel-step__label">Month-to-month start</div>
|
||||
<span class="funnel-step__note">No lock-in</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONCIERGE TEASER -->
|
||||
<section class="story" aria-labelledby="story-h">
|
||||
<div class="wrap">
|
||||
@@ -103,12 +137,12 @@
|
||||
<p class="section-tag">Everything you need <span>/ one local partner</span></p>
|
||||
<h2 id="hsvc-h">What we do</h2>
|
||||
<div class="svc-list">
|
||||
<article class="svc reveal"><div class="svc__no">01</div><div><h3 class="svc__name">Managed IT (GPS)</h3><p class="svc__desc">24/7 monitoring, automated patching, and a help desk that knows your name.</p></div><div class="svc__meta">from $19 /endpoint</div></article>
|
||||
<article class="svc reveal"><div class="svc__no">02</div><div><h3 class="svc__name">Cybersecurity</h3><p class="svc__desc">EDR, email security, dark-web monitoring, and training that catch what antivirus misses.</p></div><div class="svc__meta">in GPS-Pro & up</div></article>
|
||||
<article class="svc reveal"><div class="svc__no">03</div><div><h3 class="svc__name">Backup & Recovery</h3><p class="svc__desc">Tested backups, offsite copies, and ransomware rollback.</p></div><div class="svc__meta">in GPS-Pro & up</div></article>
|
||||
<article class="svc reveal"><div class="svc__no">04</div><div><h3 class="svc__name">Microsoft 365 & Email</h3><p class="svc__desc">Migrations, licensing, and email that is configured, secured, and supported.</p></div><div class="svc__meta">from $2 /mailbox</div></article>
|
||||
<article class="svc reveal"><div class="svc__no">05</div><div><h3 class="svc__name">Business Phones</h3><p class="svc__desc">Cloud phone systems with mobile and desktop apps, porting, and no usage surprises.</p></div><div class="svc__meta">from $22 /user</div></article>
|
||||
<article class="svc reveal"><div class="svc__no">06</div><div><h3 class="svc__name">Web & Email Hosting</h3><p class="svc__desc">Managed hosting with free SSL, daily backups, and real humans on support.</p></div><div class="svc__meta">from $15 /mo</div></article>
|
||||
<article class="svc reveal"><div class="svc__no">01</div><div><h3 class="svc__name">Managed IT (GPS)</h3><p class="svc__desc">24/7 monitoring, automated patching, and a help desk that knows your name. <a class="svc__calc-link" href="calculator.html">See what this costs →</a></p></div><div class="svc__meta">from $19 /endpoint</div></article>
|
||||
<article class="svc reveal"><div class="svc__no">02</div><div><h3 class="svc__name">Cybersecurity</h3><p class="svc__desc">EDR, email security, dark-web monitoring, and training that catch what antivirus misses. <a class="svc__calc-link" href="calculator.html">See what this costs →</a></p></div><div class="svc__meta">in GPS-Pro & up</div></article>
|
||||
<article class="svc reveal"><div class="svc__no">03</div><div><h3 class="svc__name">Backup & Recovery</h3><p class="svc__desc">Tested backups, offsite copies, and ransomware rollback. <a class="svc__calc-link" href="calculator.html">See what this costs →</a></p></div><div class="svc__meta">in GPS-Pro & up</div></article>
|
||||
<article class="svc reveal"><div class="svc__no">04</div><div><h3 class="svc__name">Microsoft 365 & Email</h3><p class="svc__desc">Migrations, licensing, and email that is configured, secured, and supported. <a class="svc__calc-link" href="calculator.html">See what this costs →</a></p></div><div class="svc__meta">from $2 /mailbox</div></article>
|
||||
<article class="svc reveal"><div class="svc__no">05</div><div><h3 class="svc__name">Business Phones</h3><p class="svc__desc">Cloud phone systems with mobile and desktop apps, porting, and no usage surprises. <a class="svc__calc-link" href="calculator.html">See what this costs →</a></p></div><div class="svc__meta">from $22 /user</div></article>
|
||||
<article class="svc reveal"><div class="svc__no">06</div><div><h3 class="svc__name">Web & Email Hosting</h3><p class="svc__desc">Managed hosting with free SSL, daily backups, and real humans on support. <a class="svc__calc-link" href="calculator.html">See what this costs →</a></p></div><div class="svc__meta">from $15 /mo</div></article>
|
||||
</div>
|
||||
<a class="more-link" href="services.html">See all services <span class="arrow" aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
@@ -126,8 +160,8 @@
|
||||
<div class="tier" role="listitem"><h3 class="tier__name">GPS-Advanced</h3><div class="tier__price">$39 <span class="per">/ endpoint / mo</span></div><p class="tier__blurb" style="border-bottom:0;">Enterprise-grade security and compliance.</p></div>
|
||||
</div>
|
||||
<div class="inline-actions">
|
||||
<a class="more-link" href="pricing.html">Full pricing breakdown <span class="arrow" aria-hidden="true">→</span></a>
|
||||
<a class="more-link" href="calculator.html">Build an estimate <span class="arrow" aria-hidden="true">→</span></a>
|
||||
<a class="btn btn--primary" href="calculator.html">Build your exact price <span class="arrow" aria-hidden="true">→</span></a>
|
||||
<a class="more-link" href="pricing.html">See full pricing breakdown <span class="arrow" aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user