<section class="bg-[#F6FBFF] py-20" data-component-type="Content" data-component-slug="real-estate-template-popular_residence">
  <div class="max-w-[90%] mx-auto">
    <!-- Header -->
    <div class="flex items-center justify-between mb-12">
      <h2 class="text-3xl sm:text-4xl font-semibold text-black" data-node="residence_heading" data-node-type="text" data-node-label="Section Heading" data-node-default="Our Popular Residence">
        {{residence_heading}}
      </h2>

      <a href="{{residence_cta_link}}" data-node="residence_cta_link" data-node-type="page_links" data-node-label="Explore All Link" data-node-default="#" class="hidden sm:flex items-center gap-2 text-sm font-medium">
        <span data-node="residence_cta_text" data-node-type="text" data-node-label="Explore All Text" data-node-default="EXPLORE ALL">
          {{residence_cta_text}}
        </span>
        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767358807/seltrix/templates/real-estate-template/Arrow%201.png" class="w-[20px] ms-[15px] object-cover">
      </a>
    </div>

 
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
     
      <div class="bg-white rounded-xl overflow-hidden border border-black/10">

        <img src="{{residence1_image}}" data-node="residence1_image" data-node-type="file" data-node-label="Residence Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359377/seltrix/templates/real-estate-template/p1.png" class="w-full h-[260px] object-cover">

        <div class="p-5">

          <h3 class="text-lg font-semibold mb-1" data-node="residence1_title" data-node-type="text" data-node-label="Residence Title" data-node-default="Blue Orchid Villa">
            {{residence1_title}}
          </h3>

          <!-- Location -->
          <div class="flex gap-[10px]">
            <img src="{{location_icon}}" data-node="location_icon" data-node-type="file" data-node-label="Location Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358820/seltrix/templates/real-estate-template/Location%20on.png" class="w-[20px] h-[20px]">
            <p class="text-sm text-gray-600 mb-4" data-node="residence1_location" data-node-type="text" data-node-label="Residence Location" data-node-default="ECR, Chennai, Tamil Nadu">
              {{residence1_location}}
            </p>
          </div>

          <!-- Features -->
          <div class="flex items-center gap-4 text-sm text-[#636363] mb-5">

            <div class="flex gap-[10px]">
              <img src="{{bed_icon}}" data-node="bed_icon" data-node-type="file" data-node-label="Bed Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358818/seltrix/templates/real-estate-template/King%20bed.png" class="w-[20px] h-[20px]">
              <p data-node="residence1_bed" data-node-type="text" data-node-label="Bed Count" data-node-default="4 Bed">
                {{residence1_bed}}
              </p>
            </div>

            <div class="flex gap-[10px]">
              <img src="{{bath_icon}}" data-node="bath_icon" data-node-type="file" data-node-label="Bathroom Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358808/seltrix/templates/real-estate-template/Bathtub.png" class="w-[20px] h-[20px]">
              <p data-node="residence1_bath" data-node-type="text" data-node-label="Bathroom Count" data-node-default="2 Bathroom">
                {{residence1_bath}}
              </p>
            </div>

            <div class="flex gap-[10px]">
              <img src="{{parking_icon}}" data-node="parking_icon" data-node-type="file" data-node-label="Parking Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358811/seltrix/templates/real-estate-template/Directions%20car%20filled.png" class="w-[20px] h-[20px]">
              <p data-node="residence1_parking" data-node-type="text" data-node-label="Parking Count" data-node-default="1 Car Parking">
                {{residence1_parking}}
              </p>
            </div>

          </div>

          
          <div class="flex items-center justify-between">

            <button class="bg-black text-white px-5 py-2 rounded-full text-sm" data-node="residence1_button" data-node-type="text" data-node-label="Button Text" data-node-default="BOOK NOW">
              {{residence1_button}}
            </button>

            <span class="font-semibold text-black" data-node="residence1_price" data-node-type="text" data-node-label="Price" data-node-default="$ 50,200,00">
              {{residence1_price}}
            </span>

          </div>

        </div>
      </div>
      
      <div class="bg-white rounded-xl overflow-hidden border border-black/10">

  <img src="{{residence2_image}}" data-node="residence2_image" data-node-type="file" data-node-label="Residence 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359379/seltrix/templates/real-estate-template/p2.png" class="w-full h-[260px] object-cover">

  <div class="p-5">

    <h3 class="text-lg font-semibold mb-1" data-node="residence2_title" data-node-type="text" data-node-label="Residence 2 Title" data-node-default="Palm Grove Villa">
      {{residence2_title}}
    </h3>

    <!-- Location -->
    <div class="flex gap-[10px]">
      <img src="{{location_icon}}" data-node="location_icon" data-node-type="file" data-node-label="Location Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358820/seltrix/templates/real-estate-template/Location%20on.png" class="w-[20px] h-[20px]">
      <p class="text-sm text-gray-600 mb-4" data-node="residence2_location" data-node-type="text" data-node-label="Residence 2 Location" data-node-default="Velachery, Chennai, Tamil Nadu">
        {{residence2_location}}
      </p>
    </div>

    <!-- Features -->
    <div class="flex items-center gap-4 text-sm text-[#636363] mb-5">

      <div class="flex gap-[10px]">
        <img src="{{bed_icon}}" class="w-[20px] h-[20px]">
        <p data-node="residence2_bed" data-node-type="text" data-node-label="bed Count" data-node-default="4 Bed">
          {{residence2_bed}}
        </p>
      </div>

      <div class="flex gap-[10px]">
        <img src="{{bath_icon}}" class="w-[20px] h-[20px]">
        <p data-node="residence2_bath" data-node-type="text" data-node-label="bath Count" data-node-default="2 Bathroom">
          {{residence2_bath}}
        </p>
      </div>

      <div class="flex gap-[10px]">
        <img src="{{parking_icon}}" class="w-[20px] h-[20px]">
        <p data-node="residence2_parking" data-node-type="text" data-node-label="parking Count" data-node-default="1 Car Parking">
          {{residence2_parking}}
        </p>
      </div>

    </div>

    <!-- Footer -->
    <div class="flex items-center justify-between">
      <button class="bg-black text-white px-5 py-2 rounded-full text-sm" data-node="residence2_button" data-node-type="text" data-node-default="BOOK NOW" data-node-label="BOOK NOW Button2">
        {{residence2_button}}
      </button>

      <span class="font-semibold text-black" data-node="residence2_price" data-node-type="text" data-node-default="$ 50,200,00" data-node-label="Price2">
        {{residence2_price}}
      </span>
    </div>

  </div>
      </div>

       <div class="bg-white rounded-xl overflow-hidden border border-black/10">

  <img src="{{residence3_image}}" data-node="residence3_image" data-node-type="file" data-node-label="Residence 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359380/seltrix/templates/real-estate-template/p3.png" class="w-full h-[260px] object-cover">

  <div class="p-5">

    <h3 class="text-lg font-semibold mb-1" data-node="residence3_title" data-node-type="text" data-node-label="Residence 3 Title" data-node-default="Hillcrest Estate">
      {{residence3_title}}
    </h3>

    <!-- Location -->
    <div class="flex gap-[10px]">
      <img src="{{location_icon}}" data-node="location_icon" data-node-type="file" data-node-label="Location Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358820/seltrix/templates/real-estate-template/Location%20on.png" class="w-[20px] h-[20px]">
      <p class="text-sm text-gray-600 mb-4" data-node="residenc3_location" data-node-type="text" data-node-label="Residence 3 Location" data-node-default="OMR, Chennai, Tamil Nadu">
        {{residenc3_location}}
      </p>
    </div>

    <!-- Features -->
    <div class="flex items-center gap-4 text-sm text-[#636363] mb-5">

      <div class="flex gap-[10px]">
        <img src="{{bed_icon}}" class="w-[20px] h-[20px]">
        <p data-node="residence3_bed" data-node-type="text" data-node-label="bed count" data-node-default="4 Bed">
          {{residence3_bed}}
        </p>
      </div>

      <div class="flex gap-[10px]">
        <img src="{{bath_icon}}" class="w-[20px] h-[20px]">
        <p data-node="residence3_bath" data-node-type="text" data-node-label="bath count" data-node-default="2 Bathroom">
          {{residence3_bath}}
        </p>
      </div>

      <div class="flex gap-[10px]">
        <img src="{{parking_icon}}" class="w-[20px] h-[20px]">
        <p data-node="residence3_parking" data-node-type="text" data-node-label="Parking count" data-node-default="1 Car Parking">
          {{residence3_parking}}
        </p>
      </div>

    </div>

    <!-- Footer -->
    <div class="flex items-center justify-between">
      <button class="bg-black text-white px-5 py-2 rounded-full text-sm" data-node="residence3_button" data-node-type="text" data-node-default="BOOK NOW" data-node-label="BOOK NOW button3">
        {{residence3_button}}
      </button>

      <span class="font-semibold text-black" data-node="residence3_price" data-node-type="text" data-node-default="$ 50,200,00" data-node-label="Price3">
        {{residence3_price}}
      </span>
    </div>

  </div>
      </div>

<div class="bg-white rounded-xl overflow-hidden border border-black/10">

  <img src="{{residence4_image}}" data-node="residence4_image" data-node-type="file" data-node-label="Residence 4 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359382/seltrix/templates/real-estate-template/p4.png" class="w-full h-[260px] object-cover">

  <div class="p-5">

    <h3 class="text-lg font-semibold mb-1" data-node="residence4_title" data-node-type="text" data-node-label="Residence 4 Title" data-node-default="Sunbeam Meadows">
      {{residence4_title}}
    </h3>

    <!-- Location -->
    <div class="flex gap-[10px]">
      <img src="{{location_icon}}" data-node="location_icon" data-node-type="file" data-node-label="Location Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358820/seltrix/templates/real-estate-template/Location%20on.png" class="w-[20px] h-[20px]">
      <p class="text-sm text-gray-600 mb-4" data-node="residenc4_location" data-node-type="text" data-node-label="Residence 4 Location" data-node-default="Anna Nagar, Chennai, Tamil Nadu">
        {{residenc4_location}}
      </p>
    </div>

    <!-- Features -->
    <div class="flex items-center gap-4 text-sm text-[#636363] mb-5">

      <div class="flex gap-[10px]">
        <img src="{{bed_icon}}" class="w-[20px] h-[20px]">
        <p data-node="residence4_bed" data-node-type="text" data-node-label="bed count" data-node-default="4 Bed">
          {{residence4_bed}}
        </p>
      </div>

      <div class="flex gap-[10px]">
        <img src="{{bath_icon}}" class="w-[20px] h-[20px]">
        <p data-node="residence4_bath" data-node-type="text" data-node-label="bath count" data-node-default="2 Bathroom">
          {{residence4_bath}}
        </p>
      </div>

      <div class="flex gap-[10px]">
        <img src="{{parking_icon}}" class="w-[20px] h-[20px]">
        <p data-node="residence4_parking" data-node-type="text" data-node-label="Parking count" data-node-default="1 Car Parking">
          {{residence4_parking}}
        </p>
      </div>

    </div>

    <!-- Footer -->
    <div class="flex items-center justify-between">
      <button class="bg-black text-white px-5 py-2 rounded-full text-sm" data-node="residence4_button" data-node-type="text" data-node-default="BOOK NOW" data-node-label="BOOK NOW button4">
        {{residence4_button}}
      </button>

      <span class="font-semibold text-black" data-node="residence4_price" data-node-type="text" data-node-default="$ 50,200,00" data-node-label="Price4">
        {{residence4_price}}
      </span>
    </div>

  </div>
      </div>

      <div class="bg-white rounded-xl overflow-hidden border border-black/10">

  <img src="{{residence5_image}}" data-node="residence5_image" data-node-type="file" data-node-label="Residence 5 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359383/seltrix/templates/real-estate-template/p5.png" class="w-full h-[260px] object-cover">

  <div class="p-5">

    <h3 class="text-lg font-semibold mb-1" data-node="residence5_title" data-node-type="text" data-node-label="Residence 5 Title" data-node-default="Riverbank Retreat">
      {{residence5_title}}
    </h3>

    <!-- Location -->
    <div class="flex gap-[10px]">
      <img src="{{location_icon}}" data-node="location_icon" data-node-type="file" data-node-label="Location Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358820/seltrix/templates/real-estate-template/Location%20on.png" class="w-[20px] h-[20px]">
      <p class="text-sm text-gray-600 mb-4" data-node="residence5_location" data-node-type="text" data-node-label="Residence 5 Location" data-node-default="Perungudi, Chennai, Tamil Nadu">
        {{residence5_location}}
      </p>
    </div>

    <!-- Features -->
    <div class="flex items-center gap-4 text-sm text-[#636363] mb-5">

      <div class="flex gap-[10px]">
        <img src="{{bed_icon}}" class="w-[20px] h-[20px]">
        <p data-node="residence5_bed" data-node-type="text" data-node-label="bed count" data-node-default="4 Bed">
          {{residence5_bed}}
        </p>
      </div>

      <div class="flex gap-[10px]">
        <img src="{{bath_icon}}" class="w-[20px] h-[20px]">
        <p data-node="residence5_bath" data-node-type="text" data-node-label="bath count" data-node-default="2 Bathroom">
          {{residence5_bath}}
        </p>
      </div>

      <div class="flex gap-[10px]">
        <img src="{{parking_icon}}" class="w-[20px] h-[20px]">
        <p data-node="residence5_parking" data-node-type="text" data-node-label="Parking count" data-node-default="1 Car Parking">
          {{residence5_parking}}
        </p>
      </div>

    </div>

    <!-- Footer -->
    <div class="flex items-center justify-between">
      <button class="bg-black text-white px-5 py-2 rounded-full text-sm" data-node="residence5_button" data-node-type="text" data-node-default="BOOK NOW" data-node-label="BOOK NOW button5">
        {{residence5_button}}
      </button>

      <span class="font-semibold text-black" data-node="residence5_price" data-node-type="text" data-node-default="$ 50,200,00" data-node-label="Price5">
        {{residence5_price}}
      </span>
    </div>

  </div>
      </div>

      <div class="bg-white rounded-xl overflow-hidden border border-black/10">

  <img src="{{residence6_image}}" data-node="residence6_image" data-node-type="file" data-node-label="Residence 6 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359384/seltrix/templates/real-estate-template/p6.png" class="w-full h-[260px] object-cover">

  <div class="p-5">

    <h3 class="text-lg font-semibold mb-1" data-node="residence6_title" data-node-type="text" data-node-label="Residence 6 Title" data-node-default="Coral Vista Villas">
      {{residence6_title}}
    </h3>

    <!-- Location -->
    <div class="flex gap-[10px]">
      <img src="{{location_icon}}" data-node="location_icon" data-node-type="file" data-node-label="Location Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358820/seltrix/templates/real-estate-template/Location%20on.png" class="w-[20px] h-[20px]">
      <p class="text-sm text-gray-600 mb-4" data-node="residenc6_location" data-node-type="text" data-node-label="Residence 6 Location" data-node-default="Guindy, Chennai, Tamil Nadu">
        {{residenc6_location}}
      </p>
    </div>

    <!-- Features -->
    <div class="flex items-center gap-4 text-sm text-[#636363] mb-5">

      <div class="flex gap-[10px]">
        <img src="{{bed_icon}}" class="w-[20px] h-[20px]">
        <p data-node="residence6_bed" data-node-type="text" data-node-label="bed count" data-node-default="4 Bed">
          {{residence6_bed}}
        </p>
      </div>

      <div class="flex gap-[10px]">
        <img src="{{bath_icon}}" class="w-[20px] h-[20px]">
        <p data-node="residence6_bath" data-node-type="text" data-node-label="bath count" data-node-default="2 Bathroom">
          {{residence6_bath}}
        </p>
      </div>

      <div class="flex gap-[10px]">
        <img src="{{parking_icon}}" class="w-[20px] h-[20px]">
        <p data-node="residence6_parking" data-node-type="text" data-node-label="Parking count" data-node-default="1 Car Parking">
          {{residence6_parking}}
        </p>
      </div>

    </div>

    <!-- Footer -->
    <div class="flex items-center justify-between">
      <button class="bg-black text-white px-5 py-2 rounded-full text-sm" data-node="residence6_button" data-node-type="text" data-node-default="BOOK NOW" data-node-label="BOOK NOW button6">
        {{residence6_button}}
      </button>

      <span class="font-semibold text-black" data-node="residence6_price" data-node-type="text" data-node-default="$ 50,200,00" data-node-label="Price6">
        {{residence6_price}}
      </span>
    </div>

  </div>
      </div>
    

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