<section class="bg-[#F6F6F6] min-h-screen overflow-hidden" data-component-type="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">
                <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="../assets/arrow.png" alt="Arrow"
                            class="w-[20px] p-[2px] object-cover" />
                    </span>
                </button>
            </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="../assets/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="../assets/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="../assets/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="../assets/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="../assets/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="../assets/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="../assets/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="../assets/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="../assets/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="../assets/heroimg1.png" alt="Hero Image"
                class="rounded-[30px] w-full object-cover" />
        </div>
    </div>

    </div>
</section>