talk-pro/src/components/Hero.astro

---
const heroBg = "/assets/hero-bg.png";
const phoneMockup = "/assets/hero-phone.png";
---

<section id="hero" class="relative w-full flex items-start justify-center min-h-[600px] lg:h-[891px] overflow-hidden">
  <img alt="" class="absolute inset-0 max-w-none object-cover size-full pointer-events-none" src={heroBg} />

  <div class="relative flex flex-col-reverse lg:flex-row gap-[40px] items-start w-full max-w-[1280px] mx-auto px-4 lg:px-0 h-full">
    <!-- Phone mockup -->
    <div class="hidden lg:flex flex-1 items-center min-w-0 pt-[60px] h-full">
      <div class="relative w-full" style="aspect-ratio: 673/1108;">
        <div class="absolute inset-0 overflow-hidden pointer-events-none">
          <img alt="TalkPro app on iPhone" class="absolute h-[114.36%] left-[-2.67%] max-w-none top-[-7.18%] w-[105.35%]" src={phoneMockup} />
        </div>
      </div>
    </div>

    <!-- Hero copy -->
    <div class="flex flex-col gap-[60px] h-full items-start justify-center overflow-clip shrink-0 w-full lg:w-[660px] py-8 lg:py-[80px]">
      <!-- Pill -->
      <div class="bg-white border border-[#f08458] flex items-center overflow-clip px-[16px] py-[12px] rounded-[999px] shrink-0">
        <p class="font-bold text-[#0d0d0d] text-[14px] tracking-[-0.09px] leading-normal">✦&nbsp; Available on iOS and Android</p>
      </div>

      <div class="flex flex-col gap-[24px] items-start shrink-0 w-full">
        <div class="font-bold text-[#2e2a28] text-[40px] md:text-[56px] lg:text-[72px] tracking-[-1.61px] w-full">
          <p class="leading-[1.1] mb-0">A Modern Way to</p>
          <p class="leading-[1.1]">Stay Connected</p>
        </div>
        <p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] w-full">
          TalkPro is a modern messaging app designed for clear, simple, and reliable communication. From private chats to group conversations, channels, voice calls, and video calls, TalkPro helps people stay connected in one familiar experience.
        </p>
        <div class="flex flex-wrap gap-[14px] items-center overflow-clip shrink-0">
          <a href="#download" class="bg-[#f28a4b] flex items-center justify-center overflow-clip px-[24px] py-[14px] rounded-[17px] shrink-0 hover:bg-[#e07a3b] transition-colors">
            <span class="font-bold text-white text-[15px] tracking-[-0.13px] leading-normal">Download TalkPro  ↓</span>
          </a>
          <a href="#features" class="bg-[rgba(255,255,255,0.55)] border border-[#e3d9d1] flex items-center justify-center overflow-clip px-[24px] py-[14px] rounded-[17px] shrink-0 hover:bg-white transition-colors">
            <span class="font-bold text-[#2e2a28] text-[15px] tracking-[-0.13px] leading-normal">Explore Features  →</span>
          </a>
        </div>
      </div>

      <!-- Tags -->
      <div class="flex flex-wrap gap-[10px] items-center overflow-clip shrink-0">
        <div class="bg-[rgba(255,255,255,0.68)] border border-white flex items-center overflow-clip px-[14px] py-[9px] rounded-[999px] shrink-0">
          <span class="font-bold text-[#7a726d] text-[14px] tracking-[-0.09px] whitespace-nowrap leading-normal">Identity Layer</span>
        </div>
        <div class="bg-[rgba(255,255,255,0.68)] border border-white flex items-center overflow-clip px-[14px] py-[9px] rounded-[999px] shrink-0">
          <span class="font-bold text-[#7a726d] text-[14px] tracking-[-0.09px] whitespace-nowrap leading-normal">AI Native Messaging</span>
        </div>
        <div class="bg-[rgba(255,255,255,0.68)] border border-white flex items-center overflow-clip px-[14px] py-[9px] rounded-[999px] shrink-0">
          <span class="font-bold text-[#7a726d] text-[14px] tracking-[-0.09px] whitespace-nowrap leading-normal">Adaptive Privacy</span>
        </div>
      </div>
    </div>
  </div>
</section>