rank-leaderboard

Summary

Two-column section. Left holds an eyebrow, three-line H3 ("Get more Sales by Improving Results"), and a CTA button. Right holds a "leaderboard" of four ranked company cards (Amazon, eBay, Walmart, Shopify) staggered vertically like a podium, with seven floating circle PNGs decorating the negative space and a rotated bg-shape PNG behind them.

HTML structure (minimal)

<div class="tp-rank__area pb-200">
  <div class="container">
    <div class="row">
      <div class="col-xl-5 order-1">
        <div class="tp-rank__section-box pb-25 wow tpfadeUp">
          <h4 class="tp-section-subtitle">Key Benefits</h4>
          <h3 class="tp-section-title">Get more Sales <br> by Improving <br> Results</h3>
        </div>
        <div class="tp-rank__btn wow tpfadeUp">
          <a class="tp-btn tp-btn-hover alt-color-black"><span>Explore More</span><b></b></a>
        </div>
      </div>
      <div class="col-xl-7 order-0 order-lg-2">
        <div class="tp-rank__wrapper p-relative">
          <div class="tp-rank__circle-shape-1 wow tpfadeUp"><img src="sky-circle.png"></div>
          <div class="tp-rank__circle-shape-2 wow tpfadeLeft"><img src="yellow-circle.png"></div>
          <div class="tp-rank__circle-shape-3 wow tpfadeRight"><img src="black-circle.png"></div>
          <div class="tp-rank__circle-shape-4 wow tpfadeIn"><img src="black-sm-circle.png"></div>
          <!-- circle-shape-5 / 6 / 7 -->
          <div class="tp-rank__bg-shape"><img src="rank-bg-shape.png"></div>
          <div class="tp-rank__rank-card wow tpfadeRight">
            <div class="tp-rank__item active p-relative z-index">
              <div class="tp-rank__cup"><span><img src="rank-cup.png"></span></div>
              <div class="tp-rank__number"><i>#</i><span>1</span></div>
              <div class="tp-rank__company"><img src="amazon.png"></div>
              <div class="tp-rank__company-info"><a>amazon.com</a><span>2.4B Visits</span></div>
            </div>
            <div class="tp-rank__item p-relative">… #2 ebay.com 700.2M Visits</div>
            <div class="tp-rank__item p-relative z-index">… #3 walmart.com 489.6M Visits</div>
            <div class="tp-rank__item p-relative">… #4 shopify.com 386.6M Visits</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.tp-rank {
  &__circle-shape-1 { position: absolute; left: 41%; bottom: -24%; }
  &__circle-shape-2 { position: absolute; left: 51%; bottom: -35%; }
  &__circle-shape-3 { position: absolute; left: 38%; bottom: -39%; }
  &__circle-shape-4 { position: absolute; left: 48%; bottom: -29%; }
  &__circle-shape-5 { position: absolute; left: 45%; bottom: -37%; }
  &__circle-shape-6 { position: absolute; left: 43%; bottom: -31%; }
  &__circle-shape-7 { position: absolute; left: 45%; bottom: -46%; }
  &__bg-shape {
    position: absolute; top: -35px; right: 65px;
    z-index: -1; transform: rotate(-12deg);
  }
  &__item {
    box-shadow: 0 20px 40px rgba(1, 16, 61, 0.14);
    background: var(--tp-common-white);
    display: inline-block;
    border-radius: 20px;
    max-width: 150px;
    padding: 55px 15px 30px;
    margin: 0 -10px;
    transition: all 4s cubic-bezier(0.2, 0.8, 0.2, 1) 0s !important;
    &:nth-child(2) { transform: translateY(30px); }
    &:nth-child(3) { transform: translateY(60px); }
    &:nth-child(4) { transform: translateY(90px); }
    &.active { transform: translateY(-30px) scale(1.05); }
  }
  &__cup {
    position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
  }
}

Animation logic

// All seven shape divs and the bg-shape use staggered WOW.js fades on scroll-in.
// Card cluster animates as a single tpfadeRight, but the per-card translateY values
// are pure CSS, so they form the podium without JS.

Notable details

• Four tp-rank__item cards each translateY a different amount (0 / 30 / 60 / 90 px) and the active first card scales up — produces a literal podium without rotating the cards.
• Seven absolutely-positioned circle PNGs are individually animated with different WOW classes (tpfadeUp, tpfadeLeft, tpfadeRight, tpfadeIn) and delays (.2s–1s) — choreography mimics confetti.
• Cards use margin: 0 -10px to overlap edges, reinforcing a deck-of-cards stack.

Use when

• Stat blocks framed as a "leaderboard" or "tier list" of brands/sites/products.
• Visualizing competitive comparisons where one card needs to feel like the winner.
• Sections needing decorative whimsy without a third-party illustration.

Caveats

• The transition: all 4s on every card looks fine on hover but interacts unexpectedly with WOW.js entrance — change to a shorter duration if you remove WOW.
• Bottom-percentage positioning (bottom: -46%) of decorative circles can clip on shorter sections.