<section class="bg-[#F6F6F6] min-h-screen overflow-hidden" data-component-type="Hero" data-component-slug="ss-education-template-home_hero">
  <div class="max-w-[90%] mx-auto lg:px-12 my-[150px] grid grid-cols-1 lg:grid-cols-2 items-center">
    <!-- LEFT CONTENT -->
    <div>
      <!-- Heading -->
      <h1 class="text-4xl sm:text-5xl xl:max-w-[100%] xl:text-6xl lg:text-4xl font-bold text-[#111111] leading-tight" data-node="hero_title" data-node-type="text" data-node-label="Hero Title" data-node-default="Master The Skills That Shape Your Digital Future">
        {{hero_title}}
      </h1>

      <!-- Description -->
      <p class="text-[#6C6C6C] mt-6 max-w-[80%]" data-node="hero_description" data-node-type="text" data-node-label="Hero Description" data-node-default="Discover expert-led courses designed to grow your digital abilities, enhance your career, and help you learn smarter—anytime, anywhere">
        {{hero_description}}
      </p>

      <!-- CTA -->
      <div class="mt-8">
        <a data-node="home_hero_link" data-node-type="page_links" data-node-label="Hero Button  Link 1" href="{{home_hero_link}}" data-node-default="#">
          <button class="flex items-center gap-3 bg-emerald-600 text-white pr-[5px] py-[5px] pl-[20px] rounded-full font-medium hover:bg-emerald-700 transition" data-node="hero_cta_text" data-node-type="text" data-node-label="Hero Button Text" data-node-default="Explore Courses">
            {{hero_cta_text}}

            <span class="bg-[#F6F6F6] text-black w-[50px] h-[50px] flex items-center justify-center rounded-full">
              <img src="{{hero_cta_icon}}" data-node="hero_cta_icon" data-node-type="file" data-node-label="Hero CTA Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750744/seltrix/templates/ss-education-template/arrow.png" alt="Arrow" class="w-[20px] p-[2px] object-cover">
            </span>
          </button>
        </a>
      </div>

      <!-- Rating -->
      <div class="flex items-center gap-4 mt-8">
        <div class="flex -space-x-2">
          <img src="{{hero_user_1}}" data-node="hero_user_1" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750793/seltrix/templates/ss-education-template/p1.jpg" class="w-10 h-10 rounded-full border-2 border-white">
          <img src="{{hero_user_2}}" data-node="hero_user_2" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750795/seltrix/templates/ss-education-template/p2.jpg" class="w-10 h-10 rounded-full border-2 border-white">
          <img src="{{hero_user_3}}" data-node="hero_user_3" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750796/seltrix/templates/ss-education-template/p3.jpg" class="w-10 h-10 rounded-full border-2 border-white">
          <img src="{{hero_user_4}}" data-node="hero_user_4" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750798/seltrix/templates/ss-education-template/p4.jpg" class="w-10 h-10 rounded-full border-2 border-white">
        </div>

        <div class="flex items-center gap-1">
          <span class="font-semibold text-[30px]" data-node="hero_rating" data-node-type="text" data-node-label="Hero Rating" data-node-default="4.5/5">
            {{hero_rating}}
          </span>
          <span class="text-yellow-400">★</span>
        </div>
      </div>

      <div class="mt-[20px]">
        <p class="text-[#010101] text-[25px] font-bold" data-node="hero_trust_text" data-node-type="text" data-node-label="Hero Trust Text" data-node-default="Trusted by 1000+ Students">
          {{hero_trust_text}}
        </p>
      </div>
      <!-- Logos -->
      <div class="flex justify-between gap-10 mt-8 opacity-70 relative">
        <span class="bg-[#F6F6F6] text-black w-[150px] h-auto flex items-center justify-center rounded-full">
          <img src="{{hero_logo_1}}" data-node="hero_logo_1" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750804/seltrix/templates/ss-education-template/slideimg1.png" class="w-full p-[2px] object-cover">
        </span>
        <span class="bg-[#F6F6F6] text-black w-[150px] h-auto flex items-center justify-center rounded-full">
          <img src="{{hero_logo_2}}" data-node="hero_logo_2" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750805/seltrix/templates/ss-education-template/slideimg2.png" class="w-full p-[2px] object-cover">
        </span>
        <span class="bg-[#F6F6F6] text-black w-[150px] h-auto flex items-center justify-center rounded-full">
          <img src="{{hero_logo_3}}" data-node="hero_logo_3" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750804/seltrix/templates/ss-education-template/slideimg1.png" class="w-full p-[2px] object-cover">
        </span>
        <span class="bg-[#F6F6F6] text-black w-[150px] h-auto flex items-center justify-center rounded-full">
          <img src="{{hero_logo_4}}" data-node="hero_logo_4" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750805/seltrix/templates/ss-education-template/slideimg2.png" class="w-full p-[2px] object-cover">
        </span>
        <span class="bg-[#F6F6F6] text-black w-[150px] h-auto flex items-center justify-center rounded-full">
          <img src="{{hero_logo_5}}" data-node="hero_logo_5" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750804/seltrix/templates/ss-education-template/slideimg1.png" class="w-full p-[2px] object-cover">
        </span>
        <div class="absolute left-0 top-0 h-full w-[300px] z-20 pointer-events-none bg-gradient-to-r from-[#F6F6F6] to-transparent"></div>

        <div class="absolute right-0 top-0 h-full w-[300px] z-20 pointer-events-none bg-gradient-to-l from-[#F6F6F6] to-transparent"></div>
      </div>
    </div>

    <!-- RIGHT IMAGE -->
    <div class="relative flex justify-center lg:justify-start">
      <div class="rounded-[40px] p-6 w-full">
        <img src="{{hero_main_image}}" data-node="hero_main_image" data-node-type="file" data-node-label="Hero Main Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750769/seltrix/templates/ss-education-template/heroimg1.png" alt="Hero Image" class="rounded-[30px] w-full object-cover">
      </div>
    </div>
  </div>
</section>