<section
  class="w-full py-24 md:py-32 lg:py-40 px-4 md:px-12 lg:px-24 grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-20 items-center relative overflow-hidden bg-cover bg-center bg-no-repeat"
  style="background-image: url('./assets/about-background.png')"
  data-component-type="Content"
>
  <!-- LEFT CONTENT -->
  <div class="relative z-[2]">
    <div
      class="inline-block py-2.5 px-6 font-['Cabin'] text-[32px] font-normal text-white rounded-xl bg-white/[0.07] border border-white/[0.12] backdrop-blur-[18px] mb-6"
      data-node="about_hero_tag"
      data-node-type="text"
      data-node-label="About Hero Tag"
      data-node-default="Our works"
    >
      {{about_hero_tag}}
    </div>

    <h1
      class="font-['Cabin'] text-[38px] md:text-[64px] font-medium leading-[105%] md:leading-[95%] text-white mb-6"
      data-node="about_hero_title"
      data-node-type="text"
      data-node-label="About Hero Title"
      data-node-default="We build high performance working systems."
    >
      {{about_hero_title}}
    </h1>

    <p
      class="font-['Cabin'] text-[24px] font-normal leading-[130%] text-[#7e7e7e] max-w-[640px] mb-8"
      data-node="about_hero_desc"
      data-node-type="textarea"
      data-node-label="About Hero Description"
      data-node-default="A team focused on structure, strategy, and measurable growth that helps brands cut through noise with clear positioning, high-impact copy, and performance-driven marketing systems. Everything we build is designed to convert, scale, and last."
    >
      {{about_hero_desc}}
    </p>

    <a
      class="w-[354px] max-w-full py-2.5 px-4 rounded-xl bg-[#d3ff5b] flex items-center gap-3 font-['Cabin'] text-[24px] font-normal text-black cursor-pointer transition-opacity duration-300 hover:opacity-85"
      data-node="about_hero_cta_link"
      data-node-type="page_links"
      data-node-label="About Hero CTA Link"
      data-node-default="{{about_hero_cta_link}}"
    >
      <span
        data-node="about_hero_cta_text"
        data-node-type="text"
        data-node-label="About Hero CTA Text"
        data-node-default="Get your free consultation"
      >
        {{about_hero_cta_text}}
      </span>

      <img
        src="{{about_hero_cta_arrow}}"
        class="w-[26px] h-[26px]"
        data-node="about_hero_cta_arrow"
        data-node-type="file"
        data-node-label="CTA Arrow Icon"
        data-node-default="./assets/Hero btn arrw.svg"
      />
    </a>
  </div>

  <!-- RIGHT IMAGE -->
  <div class="relative z-[2]">
    <img
      src="{{about_hero_image}}"
      class="w-full rounded-xl object-cover"
      alt="About Hero Image"
      data-node="about_hero_image"
      data-node-type="file"
      data-node-label="About Hero Image"
      data-node-default="./assets/Rectangle.webp"
    />
  </div>
</section>
