<section class="bg-[#F6FBFF] py-14 sm:py-20" data-component-type="Content" data-component-slug="real-estate-template-Communities">
  <div class="max-w-[90%] mx-auto">

    <div class="grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-12 items-end">

      <!-- LEFT CONTENT -->
      <div class="space-y-8">

        <!-- HEADING -->
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-semibold
                 leading-[40px] sm:leading-[52px] lg:leading-[64px]
                 text-black max-w-full" data-node="community_heading" data-node-type="textarea" data-node-label="Community Heading" data-node-default="Crafting Communities That Inspire Connected, Purposeful Living Every Single Day">
          {{community_heading}}
        </h2>

        <!-- RATING -->
        <div class="flex items-center gap-4">

          <!-- AVATARS -->
          <div class="flex -space-x-2">

            <img src="{{rating_avatar_1}}" data-node="rating_avatar_1" data-node-type="file" data-node-label="Avatar 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359337/seltrix/templates/real-estate-template/avatar1.jpg" class="w-8 h-8 rounded-full border border-white">

            <img src="{{rating_avatar_2}}" data-node="rating_avatar_2" data-node-type="file" data-node-label="Avatar 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359338/seltrix/templates/real-estate-template/avatar2.jpg" class="w-8 h-8 rounded-full border border-white">

            <img src="{{rating_avatar_3}}" data-node="rating_avatar_3" data-node-type="file" data-node-label="Avatar 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359338/seltrix/templates/real-estate-template/avatar2.jpg" class="w-8 h-8 rounded-full border border-white">

            <img src="{{rating_avatar_4}}" data-node="rating_avatar_4" data-node-type="file" data-node-label="Avatar 4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359339/seltrix/templates/real-estate-template/avatar3.jpg" class="w-8 h-8 rounded-full border border-white">

            <img src="{{rating_avatar_5}}" data-node="rating_avatar_5" data-node-type="file" data-node-label="Avatar 5" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359341/seltrix/templates/real-estate-template/avatar4.jpg" class="w-8 h-8 rounded-full border border-white">

          </div>

          <!-- RATING TEXT -->
          <div class="space-y-1">
            <div class="flex items-center gap-2">

              <span class="text-[18px] font-medium text-black" data-node="rating_value" data-node-type="text" data-node-label="Rating Value" data-node-default="4.5/5">
                {{rating_value}}
              </span>

              <img src="{{rating_star_icon}}" data-node="rating_star_icon" data-node-type="file" data-node-label="Rating Star Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359398/seltrix/templates/real-estate-template/star.png" class="w-[15px]">

            </div>
          </div>

        </div>

        <!-- DESCRIPTION -->
        <p class="text-sm text-[#636363] max-w-md" data-node="community_description" data-node-type="textarea" data-node-label="Community Description" data-node-default="Families choose us for our transparency, craftsmanship, and people-first approach.">
          {{community_description}}
        </p>

      </div>

      <!-- RIGHT CTA -->
      <div class="flex justify-start lg:justify-end items-end">

        <button class="w-[120px] h-[120px] sm:w-[140px] sm:h-[140px]
                 rounded-full bg-black text-white text-sm font-medium
                 flex items-center justify-center
                 hover:scale-105 transition-transform duration-300" data-node="cta_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="Learn More">
          {{cta_text}}
        </button>

      </div>

    </div>
  </div>
</section>