talk-pro/src/components/UseCases.astro

---
const rows = [
  { title: 'Personal Conversations', desc: 'Message friends, family, and close contacts in a simple private chat experience.' },
  { title: 'Communities',            desc: 'Join group conversations and stay active in shared interest spaces.' },
  { title: 'Teams and Projects',     desc: 'Coordinate discussions, updates, and quick decisions in group chats.' },
  { title: 'News and Updates',       desc: 'Follow channels for announcements, information, and community content.' },
]
---

<section id="use-cases" class="bg-[#fef0eb] w-full flex items-start justify-center px-[130px] py-[120px]">
  <div class="flex gap-[40px] items-center w-[1280px]">
    <!-- Left: heading -->
    <div class="flex flex-col gap-[24px] items-start overflow-clip shrink-0 w-[540px]">
      <div class="bg-white border border-[#fbbfa3] flex items-center justify-center px-[24px] py-[12px] rounded-[9999px] shrink-0">
        <span class="font-bold text-[#f08458] text-[14px] text-center tracking-[-0.04px] whitespace-nowrap leading-normal">USE CASES</span>
      </div>
      <p class="font-bold text-[#1a1a1a] text-[48px] tracking-[-1.16px] leading-[1.2] w-full">
        Made for Personal, Social, and Community Communication
      </p>
      <p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] w-full">
        With separate spaces for every context, TalkPro keeps your personal, social, and professional communications distinct and organized.
      </p>
    </div>

    <!-- Right: rows -->
    <div class="flex flex-1 flex-col items-start min-w-0 overflow-clip rounded-[30px] gap-px">
      {rows.map(row => (
        <div class="bg-[#faede8] flex h-[120px] items-center overflow-clip w-full shrink-0">
          <div class="bg-[#f08458] flex h-full items-center px-[36px] py-[24px] shrink-0 w-[300px]">
            <p class="flex-1 font-semibold text-[20px] text-white tracking-[-0.6px] leading-normal min-w-0">{row.title}</p>
          </div>
          <div class="bg-white flex flex-1 h-full items-center min-w-0 px-[36px] py-[24px]">
            <p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] flex-1 min-w-0">{row.desc}</p>
          </div>
        </div>
      ))}
    </div>
  </div>
</section>