<section data-component-type="Hero" class="about-hero w-full bg-black overflow-hidden" data-component-slug="mobile-launch-template-about-hero">
  

  <div class="w-full px-[16px] sm:px-[24px] lg:px-[96px] pt-[120px] sm:pt-[140px] lg:pt-[160px] pb-24">
    <div class="max-w-[1728px] mx-auto flex flex-col items-center text-center">
      <a href="{{about_hero_tag}}" class="mb-6 sm:mb-8 inline-flex items-center justify-center w-[220px] sm:w-[220px] h-[48px] sm:h-[56px] px-[20px] sm:px-[24px] py-[14px] sm:py-[16px] rounded-[12px] border border-[#1E1E1E] font-['DM Sans'] text-[16px] sm:text-[20px] font-medium text-white bg-[linear-gradient(180deg,#040404_0%,rgba(0,140,255,0.5)_100%)]" data-node="about_hero_tag" data-node-type="page_links" data-node-label="About Hero Tag Button" data-node-default="#">
        <span data-node="about_hero_tag_text" data-node-type="text" data-node-default="Designed for Life">
          {{about_hero_tag_text}}
        </span>
      </a>

      <h1 class="font-sfpro font-medium text-[28px] sm:text-[40px] md:text-[52px] lg:text-[64px] leading-[120%] lg:leading-[76px] text-white mb-4 sm:mb-6 max-w-[634px]" data-node="about_hero_title" data-node-type="text" data-node-label="About Hero Title" data-node-default="Smart Performance Everyday Reliability">
        {{about_hero_title}}
      </h1>

      <p class="font-sfpro text-[14px] sm:text-[18px] md:text-[20px] lg:text-[24px] leading-[150%] lg:leading-[30px] text-[#535353] mb-8 sm:mb-10 max-w-[760px]" data-node="about_hero_desc" data-node-type="text" data-node-label="About Hero Description" data-node-default="Devices built to match different lifestyles, work, play, creativity, and connection without compromise or complexity.">
        {{about_hero_desc}}
      </p>

      <div class="flex flex-row justify-center items-center gap-3 sm:gap-6 mb-14 sm:mb-20 w-full">
        <a href="{{about_hero_primary_cta}}" class="inline-flex items-center justify-center w-[194px] h-[48px] sm:h-[56px] px-[24px] py-[16px] rounded-[12px] bg-[#008CFF] font-sfpro text-[14px] sm:text-[20px] font-medium text-white" data-node="about_hero_primary_cta" data-node-type="page_links" data-node-label="About Primary CTA" data-node-default="#">
          <span data-node="about_hero_primary_cta_text" data-node-type="text" data-node-default="Buy Phones">
            {{about_hero_primary_cta_text}}
          </span>
        </a>

        <a href="{{about_hero_secondary_cta}}" class="inline-flex items-center justify-center w-[224px] h-[48px] sm:h-[56px] px-[24px] py-[16px] rounded-[12px] bg-[#202020] font-sfpro text-[14px] sm:text-[20px] font-medium text-white" data-node="about_hero_secondary_cta" data-node-type="page_links" data-node-label="About Secondary CTA" data-node-default="#">
          <span data-node="about_hero_secondary_cta_text" data-node-type="text" data-node-default="Explore Products">
            {{about_hero_secondary_cta_text}}
          </span>
        </a>
      </div>

      <div class="w-full flex justify-center">
        <img src="{{about_hero_image}}" class="w-full max-w-[1728px] rounded-[16px]" data-node="about_hero_image" data-node-type="file" data-node-label="About Hero Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767161288/seltrix/templates/mobile-launch-template/about-hero.webp">
      </div>
    </div>
  </div>
</section>