azcomputerguru/claudetools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0234ddb872c861302eca06bb31f8c35cd291d7dc
claudetools/projects/radio-show/website/src/components/home/SubscribeCTA.astro
Mike Swanson 1b45921493 Radio show website: Full Astro build with 194 episodes imported 
Complete website for The Computer Guru Show (radio.azcomputerguru.com):
- Astro 6.0.4 static site with React islands
- 194 episodes imported from gurushow.com RSS feed
- Dark/light mode HSL design system
- Persistent audio player with session persistence
- Episode archive with search and season filtering
- Home page with animated hero, stats, latest episodes
- All pages: About, Subscribe, Community, Live, Contact, Blog, 404
- Podcast RSS feed with iTunes namespace
- Session log updated

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-14 20:44:42 -07:00

154 lines
6.5 KiB
Plaintext
Raw Blame History

---
import { platforms } from '../../data/platforms';
const platformIcons: Record<string, string> = {
apple: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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.8-.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.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>`,
spotify: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg>`,
google: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.372 0 0 5.373 0 12s5.372 12 12 12c6.627 0 12-5.373 12-12S18.627 0 12 0zm-.5 4.5h1v3.258l2.82-1.628.5.866-2.82 1.628 2.82 1.628-.5.866L12.5 9.49V12.5h-1V9.49l-2.82 1.628-.5-.866 2.82-1.628-2.82-1.628.5-.866L11.5 7.758V4.5z"/></svg>`,
overcast: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="12" r="3"/><line x1="12" y1="5" x2="12" y2="7" stroke="currentColor" stroke-width="2"/><line x1="12" y1="17" x2="12" y2="19" stroke="currentColor" stroke-width="2"/><line x1="5" y1="12" x2="7" y2="12" stroke="currentColor" stroke-width="2"/><line x1="17" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2"/></svg>`,
pocketcasts: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zm0 3.6c4.636 0 8.4 3.764 8.4 8.4h-2.4c0-3.312-2.688-6-6-6s-6 2.688-6 6 2.688 6 6 6v2.4c-4.636 0-8.4-3.764-8.4-8.4S7.364 3.6 12 3.6zm0 4.8a3.6 3.6 0 110 7.2 3.6 3.6 0 010-7.2z"/></svg>`,
rss: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1" fill="currentColor"></circle></svg>`,
};
---
<section class="subscribe-cta fade-in">
<div class="subscribe-cta__bg"></div>
<div class="container subscribe-cta__content">
<h2 class="subscribe-cta__title">Never Miss an Episode</h2>
<p class="subscribe-cta__subtitle">
Subscribe on your favorite platform and get notified when new episodes drop.
</p>
<div class="subscribe-cta__platforms">
{platforms.map((platform) => (
<a
href={platform.url}
class="subscribe-cta__platform"
target={platform.url.startsWith('http') ? '_blank' : undefined}
rel={platform.url.startsWith('http') ? 'noopener noreferrer' : undefined}
aria-label={`Subscribe on ${platform.name}`}
>
<span class="subscribe-cta__icon" set:html={platformIcons[platform.icon] || platformIcons.rss} />
<span class="subscribe-cta__platform-name">{platform.name}</span>
</a>
))}
</div>
</div>
</section>
<style>
.subscribe-cta {
position: relative;
overflow: hidden;
padding-block: var(--space-16);
}
.subscribe-cta__bg {
position: absolute;
inset: 0;
background:
linear-gradient(135deg, hsl(200 85% 55% / 0.08), hsl(270 60% 50% / 0.05)),
linear-gradient(to bottom, var(--color-bg-secondary), var(--color-bg-primary));
z-index: 0;
}
.subscribe-cta__bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right, transparent, var(--color-accent), transparent);
opacity: 0.3;
}
.subscribe-cta__bg::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right, transparent, var(--color-accent), transparent);
opacity: 0.3;
}
.subscribe-cta__content {
position: relative;
z-index: 1;
text-align: center;
}
.subscribe-cta__title {
font-size: var(--text-3xl);
font-weight: 800;
background: linear-gradient(135deg, var(--color-text-primary), var(--color-accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.subscribe-cta__subtitle {
font-size: var(--text-lg);
color: var(--color-text-secondary);
margin-top: var(--space-3);
max-width: 500px;
margin-inline: auto;
}
.subscribe-cta__platforms {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
margin-top: var(--space-8);
}
.subscribe-cta__platform {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text-primary);
font-size: var(--text-sm);
font-weight: 500;
text-decoration: none;
transition:
transform var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast),
color var(--transition-fast);
}
.subscribe-cta__platform:hover {
transform: translateY(-2px);
border-color: var(--color-accent);
box-shadow: var(--shadow-glow);
color: var(--color-accent);
}
.subscribe-cta__icon {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}
@media (max-width: 640px) {
.subscribe-cta__platforms {
flex-direction: column;
align-items: center;
}
.subscribe-cta__platform {
width: 100%;
max-width: 280px;
justify-content: center;
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink