azcomputerguru/claudetools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
67dd7a457a2eaa1b8ae230bf59acafde131ffec0
claudetools/projects/radio-show/website/src/pages/contact.astro
Mike Swanson ee89727662 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

234 lines
8.5 KiB
Plaintext
Raw Blame History

---
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="Contact" description="Get in touch with The Computer Guru Show for questions, sponsorships, or guest appearances.">
<!-- Hero -->
<section class="hero section">
<div class="container">
<span class="badge fade-in">Contact</span>
<h1 class="hero__title fade-in">Get in Touch</h1>
<p class="hero__subtitle fade-in">
Questions, feedback, or business inquiries -- we would love to hear from you.
</p>
</div>
</section>
<!-- Contact Form -->
<section class="section">
<div class="container">
<div class="form-card card fade-in">
<form action="#" method="post" class="contact-form">
<div class="form-group">
<label for="contact-name">Name</label>
<input
type="text"
id="contact-name"
name="name"
required
autocomplete="name"
placeholder="Your name"
class="form-input"
/>
</div>
<div class="form-group">
<label for="contact-email">Email</label>
<input
type="email"
id="contact-email"
name="email"
required
autocomplete="email"
placeholder="your@email.com"
class="form-input"
/>
</div>
<div class="form-group">
<label for="contact-subject">Subject</label>
<select id="contact-subject" name="subject" required class="form-select">
<option value="" disabled selected>Select a subject</option>
<option value="general">General</option>
<option value="sponsorship">Sponsorship</option>
<option value="guest">Guest Appearance</option>
<option value="technical">Technical Issue</option>
</select>
</div>
<div class="form-group">
<label for="contact-message">Message</label>
<textarea
id="contact-message"
name="message"
required
rows="6"
placeholder="Your message..."
class="form-textarea"
></textarea>
</div>
<button type="submit" class="btn btn--primary form-submit">Send Message</button>
</form>
</div>
</div>
</section>
<!-- Sponsorship -->
<section class="section">
<div class="container">
<div class="sponsor-card card fade-in">
<div class="sponsor-card__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
</div>
<h2>Sponsor the Show</h2>
<p>
Reach a dedicated audience of tech enthusiasts. The Computer Guru Show offers sponsorship
opportunities including pre-roll, mid-roll, and post-roll placements, as well as dedicated
segments and custom integrations.
</p>
<p class="sponsor-card__note">
For sponsorship inquiries, select "Sponsorship" in the contact form above or reach out directly.
</p>
</div>
</div>
</section>
<!-- Social Links -->
<section class="section">
<div class="container">
<h2 class="section__title fade-in">Find Us Online</h2>
<div class="grid grid--3">
<a href="#" class="card social-card fade-in">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
<span>X / Twitter</span>
</a>
<a href="#" class="card social-card fade-in">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.369a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.086-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.332-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.086-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.332-.946 2.418-2.157 2.418z"/></svg>
<span>Discord</span>
</a>
<a href="/feed.xml" class="card social-card fade-in">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" 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 d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>
<span>RSS Feed</span>
</a>
</div>
</div>
</section>
</BaseLayout>
<style>
.hero {
text-align: center;
padding-block: var(--space-16) var(--space-8);
}
.hero__title {
font-size: var(--text-4xl);
margin-top: var(--space-4);
margin-bottom: var(--space-4);
}
.hero__subtitle {
font-size: var(--text-lg);
color: var(--color-text-secondary);
max-width: 520px;
margin-inline: auto;
}
/* Form Card */
.form-card {
max-width: 600px;
margin-inline: auto;
padding: var(--space-8);
}
.form-group {
margin-bottom: var(--space-6);
}
.form-group label {
display: block;
font-size: var(--text-sm);
font-weight: 600;
margin-bottom: var(--space-2);
color: var(--color-text-primary);
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: var(--space-3) var(--space-4);
background: var(--color-bg-tertiary);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text-primary);
font-family: var(--font-sans);
font-size: var(--text-sm);
transition: border-color var(--transition-fast);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: 2px solid var(--color-accent);
outline-offset: -1px;
border-color: var(--color-accent);
}
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--color-text-muted);
}
.form-select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: var(--space-8);
}
.form-textarea {
resize: vertical;
min-height: 120px;
}
.form-submit {
width: 100%;
justify-content: center;
padding: var(--space-4) var(--space-6);
}
/* Sponsor Card */
.sponsor-card {
max-width: 600px;
margin-inline: auto;
text-align: center;
padding: var(--space-8);
}
.sponsor-card__icon {
color: var(--color-warning);
margin-bottom: var(--space-4);
}
.sponsor-card h2 {
margin-bottom: var(--space-4);
}
.sponsor-card p {
color: var(--color-text-secondary);
font-size: var(--text-sm);
line-height: 1.8;
margin-bottom: var(--space-4);
}
.sponsor-card__note {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* Social Cards */
.social-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding: var(--space-8) var(--space-6);
text-align: center;
color: var(--color-text-primary);
cursor: pointer;
}
.social-card:hover {
color: var(--color-accent);
}
.social-card span {
font-size: var(--text-sm);
font-weight: 600;
}
</style>
Reference in New Issue View Git Blame Copy Permalink