feature-cards-trio

Summary

Centered section title and subtitle followed by three icon-led feature cards in a row. Each card has a circular gradient icon swatch, a short heading, and an arrow link icon at the bottom-right. Cards stagger in with a wow tpfadeUp reveal.

HTML structure (minimal)

<div class="tp-feature__area pt-165 pb-170 p-relative">
  <div class="tp-feature__bottom-shape"><img src="fea-bg-shape-1.png"></div>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-6 wow tpfadeUp">
        <div class="tp-feature__section-box text-center mb-55 tp-title-anim">
          <h2 class="tp-section-title">Our Exciting Features</h2>
          <p>More than 15,000 companies trust and choose Itech</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xl-4 mb-30 wow tpfadeUp" data-wow-delay=".4s">
        <div class="tp-feature__item">
          <div class="tp-feature__icon"><img src="fea-icon-1.png"></div>
          <h3 class="tp-feature__title-sm">A Unified View of The Customer</h3>
          <div class="tp-feature__link"><a href="#"><svg>→</svg></a></div>
        </div>
      </div>
      <!-- two more identical .tp-feature__item cards with delays .6s and .8s -->
    </div>
  </div>
</div>

Key SCSS tokens

.tp-feature {
  &__item {
    background: var(--tp-common-white);
    border-radius: 20px;
    padding: 40px 35px;
    box-shadow: 0px 20px 50px rgba(1, 16, 61, 0.05);
    transition: transform .4s ease, box-shadow .4s ease;
    &:hover { transform: translateY(-6px); }
  }
  &__icon {
    width: 80px; height: 80px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tp-theme-3), var(--tp-theme-4));
    margin-bottom: 25px;
  }
  &__title-sm { font-weight: 700; font-size: 22px; }
  &__link a {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--tp-border-2);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .3s, color .3s;
    &:hover { background: var(--tp-theme-1); color: #fff; border-color: transparent; }
  }
}

Animation logic

// WOW.js triggers `tpfadeUp` keyframes when the card scrolls into view.
// Custom keyframes in custom-animation.css:
@keyframes tpfadeUp {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}

Notable details

• Each card hover lifts via translateY(-6px) while the arrow circle fills with the theme color — two-axis hover feedback that feels premium without scripting.
• Stagger delays of .4s / .6s / .8s are inline data-wow-delay attributes, kept declarative rather than JS-driven.
• Decorative tp-feature__bottom-shape PNG sits absolutely behind the row, adding texture without affecting layout.

Use when

• Three-column "exciting features" or "why choose us" sections.
• SaaS marketing pages that lead with abstract iconography rather than screenshots.
• When you want a soft-card system that pairs with the rest of this template's UI.

Caveats

• WOW.js depends on Animate.css-style classes; do not strip custom-animation.css if you keep this section.