service-process-list

Summary

Two-column "Thoughtful Process" section: animated section title plus a bordered "See All Services" button on the left, four icon+title+description rows on the right that fade up sequentially as they enter the viewport.

HTML structure (minimal)

<div class="tp-service-area pt-180 pb-80 tp-btn-trigger">
  <div class="container container-1630">
    <div class="row">
      <div class="col-xl-6">
        <div class="tp-service-title-box p-relative">
          <span class="tp-section-subtitle subtitle-position tp-char-animation">I Think a lot</span>
          <h4 class="tp-section-title tp-char-animation">Thoughtful<br><span>Process</span></h4>
        </div>
        <div class="tp-service-left-btn tp-btn-bounce">
          <a class="tp-btn-border" href="/service">
            <span class="tp-btn-border-wrap">
              <span class="text-1">See All Services</span>
              <span class="text-2">See All Services</span>
            </span>
          </a>
        </div>
      </div>
      <div class="col-xl-6">
        <div class="tp-service-right-wrap">
          <div class="tp-service-item d-flex align-items-start mb-75 tp_fade_bottom">
            <div class="tp-service-icon"><img src="/service-icon-1.png" alt=""></div>
            <div class="tp-service-content">
              <h4 class="tp-service-title-sm"><a href="/service-details">VIDEO CREATION</a></h4>
              <p>Dolor magna eget est lorem ipsum dolor sit amet…</p>
            </div>
          </div>
          <!-- 3 more items -->
        </div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.tp-service-item { gap: 24px; padding-bottom: 40px; border-bottom: 1px solid var(--tp-border-1); }
.tp-service-icon { width: 80px; flex: 0 0 80px; }
.tp-section-title { font-size: 100px; line-height: 1; font-family: var(--tp-ff-gallery); }
.tp-section-title span { color: var(--tp-common-orange); } // accent on second line
.tp-btn-border {
  display: inline-flex; padding: 14px 30px; border: 1px solid var(--tp-common-black);
  border-radius: 50px; overflow: hidden; position: relative;
  // .text-1 / .text-2 cycle on hover for the lift-text effect
}

Animation logic

// fadeAnimation() handles per-item .tp_fade_bottom (y:100→0, opacity:0→1, dur 1.5s)
// charAnimation() splits .tp-char-animation into chars with perspective:300, x:100 stagger 0.05
// bounceAnimation() animates .tp-btn-bounce y:-100→0 ease 'bounce.out' on tp-btn-trigger entry

Notable details

• Splitting title and CTA into a column lets the right side carry the long content without competing visually.
• Service items use mb-75 and align-items-start instead of cards — purely typographic, very editorial.
• The CTA button has dual stacked text spans (.text-1 / .text-2) so the hover state slides one up and the other in.

Use when

• Services / capabilities lists where each row needs a paragraph rather than a single tagline.
• When you want a single CTA representing the whole section instead of one CTA per item.

Caveats

• Title size (100px) needs lots of vertical room; on mobile the title stacks above the list.