talk-pro/src/components/Hero.astro

---
import type { Translations } from '../i18n/translations'

export interface Props {
  t: Translations['hero']
  download: Translations['download']
}

const { t, download } = Astro.props
const heroBg = "/assets/hero-bg.png";
const phoneMockup = "/assets/hero-phone.png";
const androidIcon = "/assets/cta-android-icon.svg";
const appleIcon = "/assets/cta-apple-icon.svg";
---

<section id="hero" class="hero">
  <img alt="" class="hero__bg" src={heroBg} />

  <div class="hero__inner">
    <div class="hero__phone-column">
      <div class="hero__phone-frame">
        <div class="hero__phone-crop">
          <img alt={t.phoneAlt} class="hero__phone" src={phoneMockup} />
        </div>
      </div>
    </div>

    <div class="hero__content">
      <div class="hero__badge">
        <p class="hero__badge-text">{t.badge}</p>
      </div>

      <div class="hero__copy">
        <div class="hero__title">
          <p class="hero__title-line">{t.titleLine1}</p>
          <p class="hero__title-line">{t.titleLine2}</p>
        </div>
        <p class="hero__description">
          {t.description}
        </p>
        <div class="hero__actions">
          <a href="#download" class="store-badge store-badge--android hero__store-badge">
            <div class="store-badge__icon-frame">
              <img alt={download.androidAlt} class="store-badge__android-icon" src={androidIcon} />
            </div>
            <div class="store-badge__copy">
              <p class="store-badge__platform">{download.android}</p>
              <p class="store-badge__label">{download.androidCta}</p>
            </div>
          </a>
          <a href="#download" class="store-badge store-badge--ios hero__store-badge">
            <div class="store-badge__icon-frame">
              <img alt={download.appleAlt} class="store-badge__apple-icon" src={appleIcon} />
            </div>
            <div class="store-badge__copy">
              <p class="store-badge__platform">{download.ios}</p>
              <p class="store-badge__label">{download.iosCta}</p>
            </div>
          </a>
        </div>
      </div>

      <div class="hero__tags">
        {t.tags.map(tag => (
          <div class="hero__tag">
            <span class="hero__tag-text">{tag}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
</section>