<section data-component-type="Content" class="w-full bg-white" data-component-slug="interior-product-showcase-template-our-projects">
  

  <div class="our-projects-wrapper">
    <!-- Header Row -->
    <div class="op-header op-grid-row">
      <!-- Col 1 -->
      <div class="op-label-text">
        <div class="op-ellipse"></div>
        <span data-node="op_label" data-node-type="text" data-node-default="OUR PROJECTS">{{op_label}}</span>
      </div>

      <!-- Col 2 -->
      <h2 class="op-main-title" data-node="main_title" data-node-type="text" data-node-default="FURNITURE THAT SHAPES YOUR SPACE.">
        {{main_title}}
      </h2>

      <!-- Col 3 -->
      <div class="op-header-right">
        <p class="op-subtext" data-node="subtext" data-node-type="textarea" data-node-default="Explore curated pieces designed to elevate every corner.">
          {{subtext}}
        </p>
        <a href="{{projects_link}}" class="op-link" data-node="projects_link" data-node-type="url" data-node-default="#">
          <span data-node="projects_link_text" data-node-type="text" data-node-default="View All Projects">{{projects_link_text}}</span>
          <img src="{{arrow_icon}}" class="op-arrow-icon" alt="Arrow" data-node="arrow_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768302452/seltrix/templates/interior-product-showcase-template/projects-arrow.svg">
        </a>
      </div>
    </div>

    <!-- Project List -->
    <div class="op-list">
      <!-- Item 1 -->
      <article class="op-item op-grid-row">
        <!-- Col 1: Number -->
        <div class="op-number" data-node="proj_1_num" data-node-type="text" data-node-default="(001)">{{proj_1_num}}</div>

        <!-- Col 2: Content -->
        <div class="op-center-content">
          <div>
            <h3 class="op-item-title" data-node="proj_1_title" data-node-type="text" data-node-default="WARM & EARTHY SPACE">
              {{proj_1_title}}
            </h3>
            <p class="op-item-desc" data-node="proj_1_desc" data-node-type="textarea" data-node-default="Rich tones, soft textures- a cozy blend of depth and warmth for timeless living rooms.">
              {{proj_1_desc}}
            </p>
          </div>
          <div>
            <span class="op-stat-num" data-node="proj_1_stat_num" data-node-type="text" data-node-default="90+">{{proj_1_stat_num}}</span>
            <span class="op-stat-label" data-node="proj_1_stat_label" data-node-type="text" data-node-default="Transformed Spaces">{{proj_1_stat_label}}</span>
          </div>
        </div>

        <!-- Col 3: Image -->
        <div class="op-image-wrap">
          <img src="{{proj_1_img}}" class="op-image" alt="Project 1" data-node="proj_1_img" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768210845/seltrix/templates/interior-product-showcase-template/warm-space.webp">
        </div>
      </article>

      <!-- Item 2 -->
      <article class="op-item op-grid-row">
        <!-- Col 1: Number -->
        <div class="op-number" data-node="proj_2_num" data-node-type="text" data-node-default="(002)">{{proj_2_num}}</div>

        <!-- Col 2: Content -->
        <div class="op-center-content">
          <div>
            <h3 class="op-item-title" data-node="proj_2_title" data-node-type="text" data-node-default="MINIMAL & MODERN SPACE">
              {{proj_2_title}}
            </h3>
            <p class="op-item-desc" data-node="proj_2_desc" data-node-type="textarea" data-node-default="Clean, muted, and contemporary. A tone-on-tone concept for lovers of balanced designs.">
              {{proj_2_desc}}
            </p>
          </div>
          <div>
            <span class="op-stat-num" data-node="proj_2_stat_num" data-node-type="text" data-node-default="90+">{{proj_2_stat_num}}</span>
            <span class="op-stat-label" data-node="proj_2_stat_label" data-node-type="text" data-node-default="Transformed Spaces">{{proj_2_stat_label}}</span>
          </div>
        </div>

        <!-- Col 3: Image -->
        <div class="op-image-wrap">
          <img src="{{proj_2_img}}" class="op-image" alt="Project 2" data-node="proj_2_img" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768210826/seltrix/templates/interior-product-showcase-template/minimal-space.webp">
        </div>
      </article>

      <!-- Item 3 -->
      <article class="op-item op-grid-row">
        <!-- Col 1: Number -->
        <div class="op-number" data-node="proj_3_num" data-node-type="text" data-node-default="(003)">{{proj_3_num}}</div>

        <!-- Col 2: Content -->
        <div class="op-center-content">
          <div>
            <h3 class="op-item-title" data-node="proj_3_title" data-node-type="text" data-node-default="BOLD & STYLISH SPACE">
              {{proj_3_title}}
            </h3>
            <p class="op-item-desc" data-node="proj_3_desc" data-node-type="textarea" data-node-default="A statement in color and form- perfect for modern homes that embrace character.">
              {{proj_3_desc}}
            </p>
          </div>
          <div>
            <span class="op-stat-num" data-node="proj_3_stat_num" data-node-type="text" data-node-default="90+">{{proj_3_stat_num}}</span>
            <span class="op-stat-label" data-node="proj_3_stat_label" data-node-type="text" data-node-default="Transformed Spaces">{{proj_3_stat_label}}</span>
          </div>
        </div>

        <!-- Col 3: Image -->
        <div class="op-image-wrap">
          <img src="{{proj_3_img}}" class="op-image" alt="Project 3" data-node="proj_3_img" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768210799/seltrix/templates/interior-product-showcase-template/bold-space.webp">
        </div>
      </article>
    </div>
  </div>
</section>