talk-pro/src/components/Trust.astro

---
---

<section id="reliability" class="bg-white w-full flex flex-col items-center justify-center p-[120px]">
  <div class="flex flex-col gap-[40px] items-start w-[1280px]">

    <!-- Header -->
    <div class="flex flex-col gap-[24px] items-start overflow-clip w-full">
      <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">RELIABILITY</span>
      </div>
      <p class="font-bold text-[#1a1a1a] text-[48px] tracking-[-1.16px] leading-[1.2] w-full">Built with User Trust in Mind</p>
      <p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] w-full">
        TalkPro is designed with a privacy-conscious approach and a focus on dependable communication. The app keeps the user experience simple while supporting the core communication features people expect from a modern messaging platform.
      </p>
    </div>

    <!-- 4-column feature row -->
    <div class="flex gap-[24px] items-center justify-center w-full">

      <!-- Card 1: Privacy-Conscious Design -->
      <div class="flex flex-1 flex-col gap-[16px] items-center justify-end min-w-0 p-[24px] rounded-[30px]">
        <div class="relative shrink-0 size-[128px]">
          <div class="absolute inset-0 overflow-hidden pointer-events-none">
            <img alt="" class="absolute h-[174.55%] left-[-31.48%] max-w-none top-[7.04%] w-[312.73%]" src="/assets/trust-icon-sprite.png" />
          </div>
        </div>
        <div class="flex flex-col gap-[8px] items-start w-full">
          <p class="font-semibold text-[#0d0d0d] text-[16px] leading-[22px] w-full">Privacy-Conscious Design</p>
          <p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] w-full">Built with careful consideration for user communication and data handling.</p>
        </div>
      </div>

      <!-- Divider -->
      <div class="relative h-[118px] shrink-0 w-0">
        <div class="absolute inset-[0_-0.5px]">
          <img alt="" class="block max-w-none size-full" src="/assets/trust-divider.svg" />
        </div>
      </div>

      <!-- Card 2: Minimal and Focused -->
      <div class="flex flex-1 flex-col gap-[16px] items-center justify-end min-w-0 p-[24px] rounded-[30px]">
        <div class="relative shrink-0 size-[128px]">
          <div class="absolute inset-0 overflow-hidden pointer-events-none">
            <img alt="" class="absolute h-[187.32%] left-[-164.72%] max-w-none top-[3.1%] w-[335.61%]" src="/assets/trust-icon-sprite.png" />
          </div>
        </div>
        <div class="flex flex-col gap-[8px] items-start w-full">
          <p class="font-semibold text-[#0d0d0d] text-[16px] leading-[22px] w-full">Minimal and Focused</p>
          <p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] w-full">Designed around essential messaging features without unnecessary complexity.</p>
        </div>
      </div>

      <!-- Divider -->
      <div class="relative h-[118px] shrink-0 w-0">
        <div class="absolute inset-[0_-0.5px]">
          <img alt="" class="block max-w-none size-full" src="/assets/trust-divider.svg" />
        </div>
      </div>

      <!-- Card 3: Reliable Experience -->
      <div class="flex flex-1 flex-col gap-[16px] items-center justify-end min-w-0 p-[24px] rounded-[30px]">
        <div class="relative shrink-0 size-[128px]">
          <div class="absolute inset-0 overflow-hidden pointer-events-none">
            <img alt="" class="absolute h-[211.46%] left-[-187.93%] max-w-none top-[-105.62%] w-[378.86%]" src="/assets/trust-icon-sprite.png" />
          </div>
        </div>
        <div class="flex flex-col gap-[8px] items-start w-full">
          <p class="font-semibold text-[#0d0d0d] text-[16px] leading-[22px] w-full">Reliable Experience</p>
          <p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] w-full">Focused on providing a stable and familiar communication experience.</p>
        </div>
      </div>

      <!-- Divider -->
      <div class="relative h-[118px] shrink-0 w-0">
        <div class="absolute inset-[0_-0.5px]">
          <img alt="" class="block max-w-none size-full" src="/assets/trust-divider.svg" />
        </div>
      </div>

      <!-- Card 4: Continuous Improvement -->
      <div class="flex flex-1 flex-col gap-[16px] items-center justify-end min-w-0 p-[24px] rounded-[30px]">
        <div class="relative shrink-0 size-[128px]">
          <div class="absolute inset-0 overflow-hidden pointer-events-none">
            <img alt="" class="absolute left-[4.14%] max-w-none size-full top-0" src="/assets/trust-icon-improvement.png" />
          </div>
        </div>
        <div class="flex flex-col gap-[8px] items-start w-full">
          <p class="font-semibold text-[#0d0d0d] text-[16px] leading-[22px] w-full">Continuous Improvement</p>
          <p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] w-full">TalkPro will continue to improve its interface, features, and overall user experience.</p>
        </div>
      </div>

    </div>
  </div>
</section>