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

    <!-- TOP CONTENT -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-10 items-center mb-16">

      <!-- Heading -->
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-semibold text-black leading-tight" data-node="beginnings_heading" data-node-type="text" data-node-label="Beginnings Heading" data-node-default="Where You New Beginnings Start!">
        {{beginnings_heading}}
      </h2>

      <!-- Divider + Text -->
      <div class="hidden lg:flex items-center gap-10 lg:col-span-1">
        <div class="h-[80px] w-[1px] bg-black/30"></div>
        <p class="text-[#636363] max-w-sm text-sm leading-relaxed" data-node="beginnings_description" data-node-type="text" data-node-label="Beginnings Description" data-node-default="Find a place that feels like home, crafted for every lifestyle and every milestone. Start your journey with a space made for you.">
          {{beginnings_description}}
        </p>
      </div>

      <!-- CTA -->
      <div class="lg:text-right">
        <a href="{{beginnings_cta_link}}" data-node="beginnings_cta_link" data-node-type="page_links" data-node-label="Beginnings CTA Link" data-node-default="#" class="inline-block bg-black text-white px-8 py-3 rounded-full text-sm font-medium hover:bg-black/90 transition">
          <span data-node="beginnings_cta_text" data-node-type="text" data-node-label="Beginnings CTA Text" data-node-default="START YOUR SEARCH">
            {{beginnings_cta_text}}
          </span>
        </a>
      </div>

    </div>

    <!-- CARDS -->
    <div class="lg:max-w-[90%] mx-auto">
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">

        <!-- CARD 1 -->
        <div class="bg-white rounded-xl border border-black/10 p-6 hover:shadow-md transition">
          <div class="mb-6">
            <img src="{{beginnings_card1_icon}}" data-node="beginnings_card1_icon" data-node-type="file" data-node-label="Card 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358825/seltrix/templates/real-estate-template/profile-2user.png" class="w-[60px] h-[60px] rounded-full object-cover">
          </div>
          <h3 class="text-lg font-semibold mb-2" data-node="beginnings_card1_title" data-node-type="text" data-node-label="Card 1 Title" data-node-default="Smart Living">
            {{beginnings_card1_title}}
          </h3>
          <p class="text-[#636363] text-sm mb-6" data-node="beginnings_card1_desc" data-node-type="text" data-node-label="Card 1 Description" data-node-default="Homes designed with intuitive layouts, natural light, and future-ready features.">
            {{beginnings_card1_desc}}
          </p>
          <a href="{{beginnings_card1_link}}" data-node="beginnings_card1_link" data-node-type="page_links" data-node-label="Card 1 Link" data-node-default="#" class="text-sm font-semibold">
            <span data-node="beginnings_card1_text" data-node-type="page_links" data-node-label="Card 1 text" data-node-default="READ MORE">{{beginnings_card1_text}}</span>
          </a>
          
        </div>

        <!-- CARD 2 -->
        <div class="bg-white rounded-xl border border-black/10 p-6 hover:shadow-md transition">
          <div class="mb-6">
            <img src="{{beginnings_card2_icon}}" data-node="beginnings_card2_icon" data-node-type="file" data-node-label="Card 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358827/seltrix/templates/real-estate-template/route-square.png" class="w-[60px] h-[60px] rounded-full object-cover">
          </div>
          <h3 class="text-lg font-semibold mb-2" data-node="beginnings_card2_title" data-node-type="text" data-node-label="Card 2 Title" data-node-default="Prime Locations">
            {{beginnings_card2_title}}
          </h3>
          <p class="text-[#636363] text-sm mb-6" data-node="beginnings_card2_desc" data-node-type="text" data-node-label="Card 2 Description" data-node-default="Stay close to schools, workplaces, and hotspots that elevate your everyday life.">
            {{beginnings_card2_desc}}
          </p>
          <a href="{{beginnings_card2_link}}" data-node="beginnings_card2_link" data-node-type="page_links" data-node-label="Card 2 Link" data-node-default="#" class="text-sm font-semibold">
           <span data-node="beginnings_card2_text" data-node-type="page_links" data-node-label="Card 2 text" data-node-default="READ MORE">{{beginnings_card2_text}}</span>
          </a>
        </div>

        <!-- CARD 3 -->
        <div class="bg-white rounded-xl border border-black/10 p-6 hover:shadow-md transition">
          <div class="mb-6">
            <img src="{{beginnings_card3_icon}}" data-node="beginnings_card3_icon" data-node-type="file" data-node-label="Card 3 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358810/seltrix/templates/real-estate-template/crown.png" class="w-[60px] h-[60px] rounded-full object-cover">
          </div>
          <h3 class="text-lg font-semibold mb-2" data-node="beginnings_card3_title" data-node-type="text" data-node-label="Card 3 Title" data-node-default="Trusted Quality">
            {{beginnings_card3_title}}
          </h3>
          <p class="text-[#636363] text-sm mb-6" data-node="beginnings_card3_desc" data-node-type="text" data-node-label="Card 3 Description" data-node-default="Top-tier construction, secure communities, and long-lasting value in every detail.">
            {{beginnings_card3_desc}}
          </p>
          <a href="{{beginnings_card3_link}}" data-node="beginnings_card3_link" data-node-type="page_links" data-node-label="Card 3 Link" data-node-default="#" class="text-sm font-semibold">
                 <span data-node="beginnings_card3_text" data-node-type="page_links" data-node-label="Card 3 text" data-node-default="READ MORE">{{beginnings_card3_text}}</span>
          </a>
        </div>

        <!-- CARD 4 -->
        <div class="bg-white rounded-xl border border-black/10 p-6 hover:shadow-md transition">
          <div class="mb-6">
            <img src="{{beginnings_card4_icon}}" data-node="beginnings_card4_icon" data-node-type="file" data-node-label="Card 4 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767358822/seltrix/templates/real-estate-template/medal-star.png" class="w-[60px] h-[60px] rounded-full object-cover">
          </div>
          <h3 class="text-lg font-semibold mb-2" data-node="beginnings_card4_title" data-node-type="text" data-node-label="Card 4 Title" data-node-default="Easy Ownership">
            {{beginnings_card4_title}}
          </h3>
          <p class="text-[#636363] text-sm mb-6" data-node="beginnings_card4_desc" data-node-type="text" data-node-label="Card 4 Description" data-node-default="Transparent pricing, flexible plans, and expert assistance from start to finish.">
            {{beginnings_card4_desc}}
          </p>
          <a href="{{beginnings_card4_link}}" data-node="beginnings_card4_link" data-node-type="page_links" data-node-label="Card 4 Link" data-node-default="#" class="text-sm font-semibold">
             <span data-node="beginnings_card4_text" data-node-type="page_links" data-node-label="Card 4 text" data-node-default="READ MORE">{{beginnings_card4_text}}</span>
          </a>
        </div>

      </div>
    </div>

  </div>
</section>