<section data-component-type="Hero">
  <div
    class="relative h-[400px] md:h-[600px] bg-cover bg-center"
    data-node="about_hero_bg"
    data-node-type="file"
    data-node-label="Hero Background Image"
    data-node-default="../assets/hero/bg.jpg"
    style="background-image: url('{{about_hero_bg}}');"
  >
    <h1
      data-node="about_hero_title"
      data-node-type="text"
      data-node-label="Hero Title"
      data-node-default="About Us"
      class="absolute inset-0 flex items-center justify-center text-[#534931] text-3xl md:text-5xl font-bold"
    >
      {{about_hero_title}}
    </h1>
  </div>

  <div class="w-full bg-[#E5DCD2] py-4 flex justify-center">
    <p class="text-gray-600 text-sm md:text-base">
      <a
        data-node="breadcrumb_home_link"
        data-node-type="page_links"
        data-node-label="Home Breadcrumb Link"
        data-node-default="/"
        href="{{breadcrumb_home_link}}"
        class="hover:text-black cursor-pointer duration-200"
      >
        <span
          data-node="breadcrumb_home_text"
          data-node-type="text"
          data-node-label="Home Breadcrumb Text"
          data-node-default="Home"
        >
          {{breadcrumb_home_text}}
        </span>
      </a>

      <span class="mx-2 text-gray-500">/</span>

      <span
        data-node="breadcrumb_current_text"
        data-node-type="text"
        data-node-label="Current Page Breadcrumb"
        data-node-default="About Us"
        class="text-[#534931] font-medium"
      >
        {{breadcrumb_current_text}}
      </span>
    </p>
  </div>
</section>
