talk-pro/src/components/Experience.astro

---
---

<section id="experience" class="bg-white w-full flex flex-col items-center justify-center py-16 lg:py-[120px]">
  <div class="flex flex-col gap-[40px] items-center justify-center w-full max-w-[1008px] mx-auto px-4 lg:px-0">
    <p class="font-bold text-[#1a1a1a] text-[32px] md:text-[40px] lg:text-[48px] text-center tracking-[-1.16px] leading-[1.2] w-full">
      A Cleaner, More Comfortable Messaging Experience
    </p>

    <div class="flex flex-col items-start w-full">
      <!-- 3 cards row -->
      <div class="flex flex-col lg:flex-row lg:gap-[24px] lg:h-[477px] lg:items-center gap-6 w-full shrink-0">

        <!-- Card 1: Clear Interface -->
        <div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] lg:h-full items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] shrink-0 w-full lg:w-[320px]">
          <div class="relative h-[232px] shrink-0 w-full lg:w-[320px]">
            <div class="absolute inset-0 overflow-hidden pointer-events-none">
              <img alt="Clear interface screenshot" class="absolute h-[298.5%] left-0 max-w-none top-[-58.58%] w-full" src="/assets/exp-card-1.png" />
            </div>
          </div>
          <div class="flex flex-col gap-[16px] items-start overflow-clip text-center w-full">
            <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[1.4] w-full">Clear Interface</p>
            <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">A clean layout that makes conversations easy to follow.</p>
          </div>
        </div>

        <!-- Card 2: Smooth Navigation -->
        <div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] lg:h-full items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] shrink-0 w-full lg:w-[320px]">
          <div class="bg-[#ffeddf] flex flex-col items-start shrink-0 w-full lg:w-[320px]">
            <div class="relative h-[232px] shrink-0 w-full">
              <div class="absolute inset-0 overflow-hidden pointer-events-none">
                <img alt="Smooth navigation screenshot" class="absolute h-[411.28%] left-[-5.95%] max-w-none top-[-335.6%] w-[137.79%]" src="/assets/exp-card-2.png" />
              </div>
            </div>
          </div>
          <div class="flex flex-col gap-[16px] items-start overflow-clip text-center w-full">
            <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[1.4] w-full">Smooth Navigation</p>
            <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">Move between chats, groups, and channels with familiar controls.</p>
          </div>
        </div>

        <!-- Card 3: Refined Visual Design -->
        <div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] lg:h-full items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] shrink-0 w-full lg:w-[320px]">
          <div class="bg-[#ffeddf] flex flex-col h-[232px] items-start overflow-clip shrink-0 w-full lg:w-[320px]">
            <div class="flex-1 min-h-0 relative w-full">
              <div class="absolute inset-0 overflow-hidden pointer-events-none">
                <img alt="Refined visual design screenshot" class="absolute h-[298.5%] left-0 max-w-none top-[-99.23%] w-full" src="/assets/exp-card-3.png" />
              </div>
            </div>
          </div>
          <div class="flex flex-col gap-[16px] items-start overflow-clip text-center w-full">
            <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[1.4] w-full">Refined Visual Design</p>
            <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">Modern icons, colors, and interface details create a more polished experience.</p>
          </div>
        </div>

      </div>

      <!-- Footer caption -->
      <p class="font-normal text-[#7a726d] text-[18px] text-center tracking-[-0.33px] leading-[1.5] w-full mt-0">
        TalkPro is designed with clarity in mind. Every screen is built to help users focus on their conversations, reduce distractions, and move naturally between chats, groups, channels, and calls.
      </p>
    </div>
  </div>
</section>