Mediusa/AV-Yard-Pro-AI-Pilots-Client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add pure-CSS & SVG podcast and webinar section (zero images) with bilingual i18n

Browse Source
This commit is contained in:
Mediusa
2026-09-12 08:00:00 -07:00
parent a59f537eae
commit e37a57886a
4 changed files with 568 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+143
View File
@@ -107,6 +107,7 @@
<a href="#transformation" class="nav-link" data-i18n="nav.transformation">Before & After</a>
<a href="#projects" class="nav-link" data-i18n="nav.projects">Projects</a>
<a href="#areas" class="nav-link" data-i18n="nav.areas">Service Areas</a>
<a href="#podcast-webinar" class="nav-link" data-i18n="nav.media">Podcast &amp; Webinar</a>
<a href="#reviews" class="nav-link" data-i18n="nav.reviews">Reviews</a>
<a href="contact.html" class="nav-link" data-i18n="nav.contact">Contact</a>
</nav>
@@ -137,6 +138,7 @@
<a href="#transformation" class="nav-link mobile-link">Before & After</a>
<a href="#projects" class="nav-link mobile-link">Projects</a>
<a href="#areas" class="nav-link mobile-link">Service Areas</a>
<a href="#podcast-webinar" class="nav-link mobile-link" data-i18n="nav.media">Podcast &amp; Webinar</a>
<a href="#reviews" class="nav-link mobile-link">Customer Reviews</a>
<a href="contact.html" class="nav-link mobile-link">Contact Us</a>
<div class="mobile-lang-wrap">
@@ -960,6 +962,147 @@
</div>
</section>
<!-- 8.5 PODCAST & WEBINAR MEDIA SECTION (100% Vector & Pure CSS - No Images) -->
<section class="section media-hub-section" id="podcast-webinar">
<div class="container">
<div class="section-header">
<div class="section-tag">
<span class="badge">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg>
High Desert Educational Hub
</span>
</div>
<h2 class="section-title" data-i18n-html="media.title">The High Desert Yard <span class="neon-text">Podcast &amp; Webinars</span></h2>
<p class="section-description" data-i18n="media.desc">
Get expert yard maintenance tactics, LA County fire code compliance secrets, and desert xeriscaping strategies directly from our crew. Tune in or register for our next free live masterclass.
</p>
</div>
<div class="media-grid">
<!-- CARD 1: THE PODCAST -->
<div class="media-card podcast-card">
<div class="media-card-top">
<div class="media-badge-group">
<span class="media-badge podcast-badge">
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 4px;"><circle cx="12" cy="12" r="10"></circle><polygon points="10 8 16 12 10 16 10 8" fill="#080c09"></polygon></svg>
Weekly Podcast Series
</span>
<span class="media-badge-sub">New Episodes Every Tuesday</span>
</div>
<!-- Pure CSS Animated Soundwave Visualizer (Zero Image Files) -->
<div class="soundwave-container" aria-hidden="true" title="Audio Stream Active">
<span class="soundwave-bar bar-1"></span>
<span class="soundwave-bar bar-2"></span>
<span class="soundwave-bar bar-3"></span>
<span class="soundwave-bar bar-4"></span>
<span class="soundwave-bar bar-5"></span>
<span class="soundwave-bar bar-6"></span>
<span class="soundwave-bar bar-7"></span>
<span class="soundwave-bar bar-8"></span>
</div>
</div>
<div class="media-card-content">
<h3 class="media-title">High Desert Yard Talk</h3>
<p class="media-desc">
Hosted by the Next Gen crew. We break down the real science of desert yard survival: dealing with 60 MPH Palmdale windstorms, preventing tumbleweed blow-ins, and avoiding $5,000 county weed abatement fines.
</p>
<!-- Featured Episode Player Box -->
<div class="episode-box">
<div class="episode-header">
<span class="episode-tag">LATEST EPISODE #14</span>
<span class="episode-length">24 Min Listen</span>
</div>
<h4 class="episode-name">"Beating the June 1st Fire Clearance Deadline in Palmdale &amp; Lancaster"</h4>
<div class="mini-player-bar">
<button type="button" class="player-toggle-btn" aria-label="Play sample episode audio" id="podcast-play-sample">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
</button>
<div class="player-track">
<div class="player-fill"></div>
</div>
<span class="player-time">0:00 / 24:18</span>
</div>
</div>
<!-- Stream Platforms (Clean SVGs) -->
<div class="platform-strip">
<span class="platform-label">Stream Free On:</span>
<div class="platform-icons">
<a href="#podcast-webinar" class="platform-chip" title="Spotify">
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.503 17.31c-.218.358-.684.472-1.042.254-2.857-1.745-6.453-2.14-10.688-1.172-.41.094-.821-.16-.915-.57-.094-.41.16-.821.57-.915 4.634-1.06 8.608-.616 11.821 1.345.358.218.472.684.254 1.058zm1.469-3.267c-.275.447-.86.59-1.307.315-3.27-2.01-8.254-2.593-12.122-1.417-.5.152-1.034-.132-1.186-.632-.152-.5.132-1.034.632-1.186 4.417-1.34 9.907-.685 13.668 1.633.447.275.59.86.315 1.307zm.126-3.41c-3.923-2.33-10.384-2.545-14.133-1.406-.603.183-1.246-.16-1.429-.763-.183-.603.16-1.246.763-1.429 4.312-1.308 11.439-1.058 15.94 1.615.542.321.72 1.025.399 1.567-.321.542-1.025.72-1.54.416z"/></svg>
Spotify
</a>
<a href="#podcast-webinar" class="platform-chip" title="Apple Podcasts">
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.97 6.41c.64-.78 1.08-1.86.96-2.94-.93.04-2.06.62-2.72 1.4-.58.67-1.09 1.77-.95 2.83 1.04.08 2.07-.51 2.71-1.29z"/></svg>
Apple
</a>
<a href="#podcast-webinar" class="platform-chip" title="YouTube">
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
YouTube
</a>
</div>
</div>
</div>
</div>
<!-- CARD 2: THE LIVE WEBINAR -->
<div class="media-card webinar-card">
<div class="media-card-top">
<div class="media-badge-group">
<span class="media-badge webinar-badge">
<span class="pulse-live-dot"></span>
Free Interactive Webinar
</span>
<span class="media-badge-sub">Live Q&amp;A Session</span>
</div>
<!-- Clean Calendar Vector Graphic (No images) -->
<div class="webinar-icon-wrap" aria-hidden="true">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line><polygon points="12 14 15 17 12 20 12 14" fill="currentColor"></polygon></svg>
</div>
</div>
<div class="media-card-content">
<h3 class="media-title">Antelope Valley Fire-Safe Yard Masterclass</h3>
<p class="media-desc">
Learn step-by-step how to prepare your property for official county inspections and cut annual maintenance time by 80% without destroying your budget.
</p>
<!-- Session Schedule & Highlights -->
<div class="webinar-schedule-box">
<div class="webinar-date-row">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--neon-green)" stroke-width="2.5"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
<div>
<strong>Next Live Broadcast:</strong>
<span>Thursday, October 15, 2026 &bull; 6:30 PM PST</span>
</div>
</div>
<ul class="webinar-bullets">
<li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--neon-green)" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg> LA County 100-Ft Brush Clearance rules decoded</li>
<li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--neon-green)" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg> Desert Xeriscaping vs. Artificial Turf cost breakdown</li>
<li><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--neon-green)" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg> Live open Q&amp;A directly with Jose &amp; senior crew</li>
</ul>
</div>
<!-- Registration CTA -->
<div class="webinar-action-row">
<a href="#lead-form-modal" class="btn btn-primary open-quote-btn" style="width: 100%; justify-content: center;">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7.5" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>
Reserve Free Webinar Seat
</a>
<span class="webinar-guarantee">100% Free &bull; Includes PDF Fire Clearance Checklist</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 9. CUSTOMER REVIEWS -->
<section class="section" id="reviews">
<div class="container">