claudetools/projects/radio-show/website/src/components/home/AboutPreview.astro

---
---

<section class="section about-preview fade-in">
  <div class="container">
    <div class="about-grid">
      <div class="about-text">
        <span class="badge">About the Show</span>
        <h2 class="about-title">Meet Your Host</h2>
        <p class="about-lead">
          Mike Swanson has been breaking down technology for everyday people since 2014.
          As a Tucson-based tech professional and broadcaster, he brings decades of
          hands-on experience to every episode.
        </p>
        <blockquote class="about-quote">
          "Technology should empower you, not intimidate you. That is what this show is all about."
        </blockquote>
        <p class="about-body">
          From cybersecurity and privacy to the latest gadgets and internet culture,
          The Computer Guru Show covers it all -- with a healthy dose of humor, real-world
          advice, and honest opinions. No corporate sponsors telling us what to say.
          Just straight talk about tech.
        </p>
        <a href="/about" class="btn btn--primary">
          Learn More
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="5" y1="12" x2="19" y2="12"></line>
            <polyline points="12 5 19 12 12 19"></polyline>
          </svg>
        </a>
      </div>

      <div class="about-visual">
        <div class="about-image-placeholder">
          <div class="about-image-inner">
            <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
              <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>
            <span class="about-image-text">The Computer Guru</span>
          </div>
        </div>
        <div class="about-visual-accent"></div>
      </div>
    </div>
  </div>
</section>

<style>
  .about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
  }

  .about-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .about-title {
    font-size: var(--text-3xl);
    font-weight: 800;
  }

  .about-lead {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: 1.7;
  }

  .about-quote {
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--color-accent);
    padding-left: var(--space-6);
    border-left: 3px solid var(--color-accent);
    margin-block: var(--space-2);
    line-height: 1.6;
  }

  .about-body {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
  }

  .about-text .btn {
    align-self: flex-start;
    margin-top: var(--space-4);
  }

  /* Visual / placeholder area */
  .about-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .about-image-placeholder {
    width: 100%;
    aspect-ratio: 4 / 5;
    max-width: 400px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }

  .about-image-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(135deg, hsl(200 85% 55% / 0.05), transparent 50%),
      linear-gradient(315deg, hsl(270 60% 50% / 0.03), transparent 50%);
  }

  .about-image-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-text-muted);
    position: relative;
    z-index: 1;
  }

  .about-image-text {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .about-visual-accent {
    position: absolute;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    border: 1px solid hsl(200 85% 55% / 0.06);
    border-radius: var(--radius-lg);
    transform: rotate(3deg);
    z-index: 0;
  }

  @media (max-width: 768px) {
    .about-grid {
      grid-template-columns: 1fr;
      gap: var(--space-8);
    }

    .about-visual {
      order: -1;
    }

    .about-image-placeholder {
      max-width: 280px;
      margin-inline: auto;
      aspect-ratio: 1;
    }
  }
</style>